material-ui

问题 I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox. The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/ I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with

问题 I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map. Example: <Input data-role=‘someValue’ onChange={this.onChange} /> onChange = e =>{ const role = e.target.dataset.role const role2 = e.currentTarget.dataset.role } Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input. Any ideas why Material Design doesn’t allow data attributes or if there

问题 I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map. Example: <Input data-role=‘someValue’ onChange={this.onChange} /> onChange = e =>{ const role = e.target.dataset.role const role2 = e.currentTarget.dataset.role } Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input. Any ideas why Material Design doesn’t allow data attributes or if there

问题 Trying to write a style with material ui equivalent to this in CSS .deleted td { background: red } But not sure how to do it in material ui's CSS in JS way. Here are the relevant snippets I have currently const styles = theme => ({ deleted: { background: '#eee' } }) <TableRow className={classes.deleted}> <TableCell></TableCell> </TableRow> It should generate a style similar to: .deleted td { background: red } 回答1: As advised from @josh, using & deleted: { "& td": { background: "red" } } https

问题 I am trying to style one of the options for date time pickers found in material ui. I made a styled Input I liked, and was trying to use that as a base. Adding the type="datetime-local" prop to the component adds the functionality I need, but I can't find a way to style the icon button and the dialog. Here is my experiment in code sandbox: The code for the component looks like this: <Paper component="form" className={classes.paper} elevation={0}> <InputBase className={classes.input} type=

问题 I am trying to style one of the options for date time pickers found in material ui. I made a styled Input I liked, and was trying to use that as a base. Adding the type="datetime-local" prop to the component adds the functionality I need, but I can't find a way to style the icon button and the dialog. Here is my experiment in code sandbox: The code for the component looks like this: <Paper component="form" className={classes.paper} elevation={0}> <InputBase className={classes.input} type=

问题 I am building a nested form framework that uses the redux form and material ui framework -- I've built the components here to date - https://codesandbox.io/s/heuristic-hopper-lzekw what I would like to do - is append some "animation" to the fields - to mimick typing -- I've achieved this by a little function that will take the initial text and step through the chars -- updating the prop of the initial values for that field. Now the problem I have -- is I need to create an onClick on the

问题 I try to create AppBar clipped to the page top and hovering over other Drawer with React Hooks and Material Ui using class name. All as described in: https://material-ui.com/demos/drawers/#clipped-under-the-app-bar So we have const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%', }, drawer: { width: drawerWidth, flexShrink: 0, }, appBar: { zIndex: theme.zIndex.drawer + 1, }, menuButton: { marginRight: 20, [theme.breakpoints.up('md')]: { display: 'none', }, }, }));

问题 I try to create AppBar clipped to the page top and hovering over other Drawer with React Hooks and Material Ui using class name. All as described in: https://material-ui.com/demos/drawers/#clipped-under-the-app-bar So we have const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%', }, drawer: { width: drawerWidth, flexShrink: 0, }, appBar: { zIndex: theme.zIndex.drawer + 1, }, menuButton: { marginRight: 20, [theme.breakpoints.up('md')]: { display: 'none', }, }, }));

问题 So after doing npm install material-design-icons , how do I use them in my React application? The methods included here doesn't include the npm method. 回答1: This is the way you can reference it (in your styles.css): @import '~material-design-icons/iconfont/material-icons.css'; To use it: <i class="material-icons">cloud_upload</i> 回答2: Open angular.json in your project, and add the following line node_modules/material-design-icons/iconfont/material-icons.css under projects => YOUR_APP =>