我有一个使用jss样式化的组件“ Box”。设置样式后,将为其生成一个生成的className,通常类似于“ box-16”。我有另一个组件'BoxStack',其中包含组件。当我使用jss设置样式时,我有某些规则会影响其中的组件,但是这些样式正在搜索与s命名不同的className。
Box类
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
box: {
width: '300px',
backgroundColor: '#fff',
boxSizing: 'border-box',
padding: '20px'
}
});
const Box = (props) => {
const classes = useStyles();
return <div className={classes.box}>{props.children}</div>;
};
export default Box;
转换后的CSS:
BoxStack类的示例代码,在仪表板中查找子框
proven_path_dashboard: {
margin: '0 auto',
width: '940px',
maxWidth: '100vw',
'&$box': {
width: [['460px'], '!important'],
'@media screen and (max-width: 800px)': {
width: '100%'
}
示例脚本寻找Box组件,但寻找错误的className
我只想知道如何确保这些类保持一致的名称,以便可以从父组件的jss中找到子组件。