Materia-UI根样式将覆盖自定义React组件样式

Question

我将在Material UI的顶部创建一个组件库。使用JSS，我希望能够将样式传递给自定义组件。但是，我遇到了Material-ui的根样式具有比我传入的更高的特异性的问题。我尝试使用classes语法覆盖material-ui组件的默认样式，但是它只是创建了另一个具有类似内容的类名称和更高的特异性（makeStyles-root-51）。

使用自定义组件：

import React from 'react';
import {GSelect} from 'g-react-component-library/dist'
import {createUseStyles} from 'react-jss'

function App() {
    const useStyles = createUseStyles({
        gSelect: {margin: "15px"},
        separator: {marginTop: "15px"},
        example: {float: "left", display: "inline-block", whiteSpace: 'nowrap', verticalAlign: 'top'}
    });

    const classes = useStyles();
    return (
            <div className={classes.separator}>
                <div>Selects:</div>
                <GSelect default={1} className={classes.gSelect} callback={(e)=>{console.log(`${e} selected`)}} options={[1,2,3,4]}/>
                <GSelect default={'One'} className={classes.gSelect} callback={(e)=>{console.log(`${e} selected`)}} options={["One", "Two", "Three", "Four"]}/>
            </div>
        </div>
    );
}



export default App;

实际的自定义组件：

import React, {useState} from 'react';
import {Button, Select, FormControl, MenuItem, InputLabel} from '@material-ui/core'
import {makeStyles} from '@material-ui/styles'
import PropTypes from 'prop-types'

const GSelect= (props) => {

    const [value, setValue] = useState();

    const handleChange = event => {
        props.callback(event.target.value);
        setValue(event.target.value);
    };

    const useStyles = makeStyles({
        root: {
            margin: '15px'
        },
        gSelect: {
            border: 'solid #33333366 1px',
            color: 'rgba(51, 51, 51, 0.66)',
            fontWeight: '700',
            backgroundColor: 'white',
            outline: 'none',
            borderRadius: '5px',
            textAlign: 'left',
            width: '300px',
            position: 'relative',
        }
    });

    const classes = useStyles();
    return (
        <FormControl classes={{root: classes.root}} className={props.className}>
        <InputLabel id="demo-simple-select-label">{props.default}</InputLabel>
        <Select value={value} onChange={handleChange} className={classes.gSelect}>
            {props.options.map((option, index) => {
                return <MenuItem key={`${option}_${index}`} value={option}>{option}</MenuItem>
            })}
        </Select>
        </FormControl>
    )
};

GSelect.propTypes = {
    callback: PropTypes.func.isRequired,
    options: PropTypes.array.isRequired,


  default: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
    ]).isRequired,
    disabled: PropTypes.bool,
    width: PropTypes.string
};

module.exports = {
    GSelect
};

Answer 1

有两种方法可以使用MUI进行操作，我更喜欢的一种方法是通过&&提高特异性。

const useStyles = makeStyles({
  root: {
    '&&': {
      margin: '15px'
     },
  },
});

与gSelect相同

我希望这能奏效

ps.s。我不建议您使用dep：react-jss，因为MUI已经在内部实现了JSS，并且它公开了用例可能需要的方法。看到这里：

https://material-ui.com/styles/basics/