material-ui

问题 After perusing the source code I've tried the following, which works but generates a warning in the console. const myTheme = createMuiTheme({ overrides: { MuiSwitch: { checked: { "& + $bar": { opacity: 1.0, backgroundColor: "rgb(129, 171, 134)" // Light green, aka #74d77f } } } } }); The error/warning I get is: Warning: Material-UI: the `MuiSwitch` component increases the CSS specificity of the `checked` internal state. You can not override it like this: { "checked": { "& + $bar": { "opacity"

问题 I'm using Material UI for React and I'd like to disable the way it handles the classnames when NODE_ENV=production . For example development: .MuiAppBar-root-12 production: .jss12 I'd like the production class names to be the same classes used in development (I'm using this framework for prototyping reasons and it's hard to debug when sharing to others). 回答1: As implied by the prod prefix .jss12 , Material UI uses react-jss to perform this minification. You can use Material UI's

问题 I have a simple ReactJS app based on hooks (no classes) using StrictMode. I am using React version 16.13.1 and Material-UI version 4.9.10. In the Appbar I am using Drawer. <div className={classes.root}> <AppBar position="static"> <Toolbar> <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleDrawerOpen}> <MenuIcon /> </IconButton> <Typography variant="h6" className={classes.title}> Online Information </Typography> </Toolbar> </AppBar>

问题 I tried several times the example given in the documentation. but it didn't work well for me. can any one help me.... this is the code import React, {Component} from 'react'; import SelectField from 'material-ui/SelectField'; import MenuItem from 'material-ui/MenuItem'; const names = [ 'Oliver Hansen', 'Van Henry', 'April Tucker', 'Ralph Hubbard', 'Omar Alexander', 'Carlos Abbott', 'Miriam Wagner', 'Bradley Wilkerson', 'Virginia Andrews', 'Kelly Snyder', ]; /** * `SelectField` can handle

问题 I tried several times the example given in the documentation. but it didn't work well for me. can any one help me.... this is the code import React, {Component} from 'react'; import SelectField from 'material-ui/SelectField'; import MenuItem from 'material-ui/MenuItem'; const names = [ 'Oliver Hansen', 'Van Henry', 'April Tucker', 'Ralph Hubbard', 'Omar Alexander', 'Carlos Abbott', 'Miriam Wagner', 'Bradley Wilkerson', 'Virginia Andrews', 'Kelly Snyder', ]; /** * `SelectField` can handle

问题 I am building a web application in react js and I'm using the material-ui components library. I'm using the table component and it looks good on desktop but I want it to adjust and look good also on mobile browser. Is material-ui supports such thing? How can I do it? Example of the current situation: PC\Mobile: Source code: import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import

问题 I'm trying to use a Material UI Select component on a dark background: But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following: const styles = theme => { root: { borderBottom: '1px solid white', }, icon: { fill: 'white', }, } class MyComponent extends React.Component { render() { const {classes} = this.props; return ( <Select value={this.props.value} inputProps={

问题 I am trying to get Material-UI tabs to work with routing, and while the routing is working and displaying the selected tab, the smooth animation of navigating between tabs is no longer working. How can I use react router with Material-UI tabs to keep the tab animations working as they should? As of now, I have the tabs in my HomeHeader.js and I am using this component to pass down the vale as props in order to change the value and thus change the selected tab. For simplicity, I simplified my

问题 I wrote a component that is supposed to list out a bunch of checkboxes with corresponding textfields. When you click on the checkboxes, or type in the fields it's meant to update state. The textbox is working ok, but when I type in the fields, it updates state ok, but I lose focus whenever I tap the keyboard. I realized this is probably due to not having keys set, so I added keys to everything but it still is losing focus. At one point I tried adding in stopPropegation on my events because I

问题 I wrote a component that is supposed to list out a bunch of checkboxes with corresponding textfields. When you click on the checkboxes, or type in the fields it's meant to update state. The textbox is working ok, but when I type in the fields, it updates state ok, but I lose focus whenever I tap the keyboard. I realized this is probably due to not having keys set, so I added keys to everything but it still is losing focus. At one point I tried adding in stopPropegation on my events because I