material-ui

问题 I have a Select and the inputs are in Chip Format. I tried console log of the value selected and it is getting it fine. But for some reason, it does not get displayed on the select box. What am I doing wrong here? handleChange = event => { this.setState({ badge : event.target.value }); }; const chipOptions = [ {key: 1, 'text': 'text1', 'value': 'text1'}, {key: 2, 'text':'text2', 'value':'text2'}, {key: 3, 'text':'text3', 'value':'text3'} ] <FormControl className={classes.formControl}> <Select

问题 I want wrap some TextFields in a outlined container and I found this answer. This work as i want: But when I click in an inside textfield all the texfields focused: This is my code: import React from "react"; import ReactDOM from "react-dom"; import OutlinedDiv from "./OutlinedDiv"; import TextField from "@material-ui/core/TextField"; import Grid from "@material-ui/core/Grid"; function App() { return ( <div className="App"> <OutlinedDiv label="DIV"> <Grid container justify="center" alignItems

问题 I am using the select field from material UI react When I select any item from the field I face two issues: Border bottom line become blue and background color become gray. I need to change Border bottom line to green and background color to white. here is my code https://codesandbox.io/s/zqok7r3x63 <FormControl className={classes.formControl}> <InputLabel required htmlFor="age-native-simple" FormLabelClasses={{ asterisk: classes.labelAsterisk, root: classes.labelRoot, focused: classes

问题 I have a Layout HOC with Grid. Inside I have 4 Widget components with Grid items. I want these components to be displayed in the following manner: large screens: all 4 in 1 row medium screens: 2 in a row, 2 columns small screens: 1 widget taking full width, 4 rows So I configured it like this: <Grid item xs={12} sm={2} md={3}> ...content </Grid> However, when I resize the screen it goes directly from 4 to 1. I tried to reconfigure the theme in my index.js: const theme = createMuiTheme({

问题 How do I change the color of the icon and text of the selected link (Home in this example) to red and the color of the icon and text of the inactive links (Course and Authors in this example) to green? The docs are very thin. class MyBottomNavigation extends Component { render() { return ( <Paper zDepth={1}> <BottomNavigation selectedIndex={this.state.selectedIndex}> <BottomNavigationItem label="Home" icon={recentsIcon} /> <BottomNavigationItem label="Course" icon={favoritesIcon} />

问题 Following this question, I would like to replace the TextField (to input the age) component to use a Select component since I notice both have the inputProps property. Original app: function App() { const [state, setState] = React.useState({ cats: [{ name: "cat1", age: "2" }, { name: "cat2", age: "5" }], owner: "Owner's Name" }); const handleFormChange = e => { if (["name", "age"].includes(e.target.dataset.fieldType)) { const newCats = [...state.cats]; newCats[e.target.dataset.id][e.target

问题 I'm new for React and Material-UI too. I have this App.js file: import React, {Component} from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar'; import IconButton from 'material-ui/IconButton'; import NavigationMenu from 'material-ui/svg-icons/navigation/menu'; import DrawerMenu from './DrawerMenu'; const AppBarIcon = () => ( <AppBar title="Title" iconElementLeft={<IconButton onClick={???}> <NavigationMenu /> </IconButton>} /

问题 I am having hard time understanding how I should structer my project. I am using react with material UI and css modules. Problem is that god knows why, all styling from MUI loads at the bottom of the header same as css module styling. After some research I found two solutions: Use !important inside css modules which is terrible. Changing the injection order https://material-ui.com/guides/interoperability/#css-modules Problem with the second one is that it would be terrible tedieouse in a

问题 I can't seem to find a way to change the tick color in Material UI MuiCheckbox All the Demos show how to change the color of the whole checkbox, but in all of them, the tick is white. How can I change the color of the tick only? 回答1: Below is an approach that seems to work. The gist of the approach is to create a box (via the :after pseudo-element) that is slightly smaller than the icon for the check and has the desired color as the background color. Then place that box behind the "checked"

问题 I'm trying to utilize the Table component from Material UI to build a data table. However, I'm struggling with making equal width columns for my datatable. Currently I'm trying something like this: <TableCell key={props.name} style={{width: '25%'}}> <span style={{ width: `${(100 / props.numCols)}%`, whiteSpace: "pre", overflow: "scroll", display: 'block' }} > {props.value} </span> </TableCell> However, this doesn't seem to do the trick. I expect 4 columns of equal widths but in this photo you