jss

问题 I start to study material-ui and create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc The style of jss is unusual for me, but if you help me with these two simple exercises, then I will understand everything. First: I want union common properties of ButtonLeft and ButtonRight into new class and extend it: (https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object) ButtonControll: { display: "none", position: "absolute", fontSize: "24px" },

问题 I am working on a project using Webpack 4.10.2 and Material-UI v1.1.0 . MUI docs is talking about class name generator, and I am OK with the result of shortening classes names, but there is something I don't understand in the build process, I am probably missing a Webpack Module or Plugin (I am for instance just using babel-loader and no Plugin). I just tryed many combinations with UglifyJsPlugin (through optimization.minimizer) compress and mangle but nothing works. The problem: The class

问题 Material UI uses JSS at its core and you sometimes need to override styles from their base components. Example from Input: '&:hover:not($disabled):before'{ ... } I cannot find this syntax mentioned in the JSS syntax docs, so it's hard to discuss with others without a common name. What is it called? 回答1: This functionality is made possible through a plugin for nesting. The plugin itself describes this as "nested selectors", which is also usually the term you will find being used to describe it

问题 I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node. span { color: red; } button:hover span { color: blue; } <button> <span>Click Me</span> </button> I am unsure how to write this in JSS. Something I have tried looks like: const styles = { button: { '&:hover': { span: { color: 'blue', } } }, span: { color: 'red', } } const { classes } = jss.createStyleSheet(styles)

问题 I'm using material-ui in react. Let's say I have this component with these styles const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.grey[100] } }, addIcon: (props: { dragActive: boolean }) => ({ height: 50, width: 50, color: theme.palette.grey[400], marginBottom: theme.spacing(2) }) })); function App() { const classes = useStyles(); return ( <Grid container>

问题 When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work. const styles = theme => ({ cardcontent: { paddingLeft: 0, paddingRight:0, paddingTop:0, paddingBottom: 0, }, }) And then applying that style: <CardContent className={classes.cardcontent}></CardContent> this is what I see when previewing the

问题 When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work. const styles = theme => ({ cardcontent: { paddingLeft: 0, paddingRight:0, paddingTop:0, paddingBottom: 0, }, }) And then applying that style: <CardContent className={classes.cardcontent}></CardContent> this is what I see when previewing the

问题 How do I go about styling the transparent dark overlay of a material-ui dialog or modal? I'm using material-ui/React/Typescript. Instead of a transparent dark, I want it to be a transparent white. I'd prefer a JSS solution but an inline style is welcomed. 回答1: You can use the BackdropProps property of the modal: <Modal aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" open={this.state.open} onClose={this.handleClose} BackdropProps= {{ classes: { root: classes

问题 Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( <div className={ this.props.classes.container }> The above works, but is there a way to add both classes, without using the classNames npm package? Something like: <div className={ this.props.classes.container + this.props

问题 I am using react-admin and I am using their Create component that use TextField from @material-ui/core . Of course I have read the documentation here I would like to completely customize the render for a custom view, this is how look the generated html: <div class="create-page Component-root-55" notification=""> <div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53"> <form class="simple-form" locale="en"> <div class=