material-ui

问题 I want to use a theme in parts of my own components that are class based. I cannot get anything to work, all examples in the documentation is for functional components. Basically the theme is defined and I want to use it to style my own components so I can avoid repeating myself and change the code at the higher level and it change everywhere. My App.js import { ThemeProvider } from '@material-ui/styles'; import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme(

问题 I want to use a theme in parts of my own components that are class based. I cannot get anything to work, all examples in the documentation is for functional components. Basically the theme is defined and I want to use it to style my own components so I can avoid repeating myself and change the code at the higher level and it change everywhere. My App.js import { ThemeProvider } from '@material-ui/styles'; import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme(

问题 RELATED QUESTION OVER AT: Styles being overwritten by Material-UI style I am create a component library on top of Material UI. Using JSS I'd like to be able to pass in styles to my custom components. However, I'm having issues with material-ui's root styles having higher specificity than what I'm passing in. I have tried overwriting the material-ui components default styles with the classes syntax but it simply creates another class with a similar name and higher specificity (makeStyles-root

问题 RELATED QUESTION OVER AT: Styles being overwritten by Material-UI style I am create a component library on top of Material UI. Using JSS I'd like to be able to pass in styles to my custom components. However, I'm having issues with material-ui's root styles having higher specificity than what I'm passing in. I have tried overwriting the material-ui components default styles with the classes syntax but it simply creates another class with a similar name and higher specificity (makeStyles-root

问题 I am using mui-rte rich text editor (https://github.com/niuware/mui-rte) in a react project. I am not able to figure out how to input text to the rte input area when writing a selenium webdriver integration test. As I understand correctly, mui-rte is a materia-ui wrapper of draftjs. The react code is simply: <MUIRichTextEditor onChange={onChange} value={initial} {...rest} / > This generates the following html elements: <div id="mui-rte-container" class="MUIRichTextEditor-container-73"> <div

问题 In my form, I am using Formik/Yup for Validation. Currently, this works in my form perfectly: export default function AddUserPage() { const [firstName, setFirstName] = useState(""); const [email, setEmail] = useState(""); return ( <div> <Formik initialValues={{ firstName: "", email: "" }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); }, 1000); }} validationSchema={schema} > {props => { const { values: { firstName,

问题 In my form, I am using Formik/Yup for Validation. Currently, this works in my form perfectly: export default function AddUserPage() { const [firstName, setFirstName] = useState(""); const [email, setEmail] = useState(""); return ( <div> <Formik initialValues={{ firstName: "", email: "" }} onSubmit={(values, actions) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); }, 1000); }} validationSchema={schema} > {props => { const { values: { firstName,

问题 The moment i wrap "form" element with Material UI "Dialog", I get an "Cannot read property 'offsetWidth' of null" error, which makes it impossible for automatic width of InputLabel to work. When i remove Dialog it works just fine and InputLabelRef is properly read on ComponentDidmount. sandbox with example: https://codesandbox.io/s/1q98z07w13 I need it to be wrapped with Dialog. What might be the issue here? 回答1: The reason that this is occurring is because the components inside of your

问题 Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an "create new" component, which is a piece of material paper with a content add button on the top. Here is the code. import React from 'react'; import Paper from 'material-ui/lib/paper'; import ContentAdd from 'material-ui/lib/svg-icons/content/add'; import IconButton from 'material-ui/lib/icon-button'; const styleForPaper = { width: '96vw', height: '20vh',

问题 I am using Material UI Multiple Select based on documentation example. I need to save id of the selected option and show name, I have tried many ways but nothing helps. I need to store the id and Display the value. Please help me with your guidance. Here is my codesandbox link 回答1: I was wondering about the same and the only way I found to make it work is by transforming the array to an object . Here goes the sandbox: https://codesandbox.io/s/material-demo-5cy6p In it you can see how names is