我正在使用材料UI选择组件在我的反应项目。
我正在尝试重写CSS类.muipaper-root和或.muimenu-list。
我的选择组件：
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
css={styles.select}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
css={styles.selectItem}
>
{city.label}
</MenuItem>
);
})}
</Select>
下面不行吗？
export default ({ theme }: StylesProps) => ({
select: css`
.MuiPaper-root {
background-color: red;
}
`,
});
为了覆盖材质UI类，您可以用类覆盖样式。在这种方法中，您需要创建包含修改过的类的usestyles对象。
然后，可以通过更改类属性来为目标组件（例如MenuItem)分配：
import { makeStyles } from '@material-ui/core/styles';
//other import statements//
const useStyles = makeStyles({
list: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
root:{
//css properties for the root//
},
});
export default function ClassesNesting() {
const classes = useStyles();
return (
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
classes={{
root: classes.root,
}}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
classes={{
list: classes.list,
}}
>
>
{city.label}
</MenuItem>
);
})}
</Select>
)
其他组件和类也是如此。
