我正在使用样式化组件,并且想通过嵌套 css 在 div 内设置子元素的样式。查看我的演示 here
const styles = theme => ({
root: {
...theme.typography.button,
backgroundColor: theme.palette.common.white,
padding: theme.spacing.unit,
">span": {
background: "red"
}
}
});
function TypographyTheme(props) {
return (
<div className={props.classes.root}>
<h1>
<span>{"This div's text looks like that of a button."}</span>
</h1>
</div>
);
}
最佳答案
它看起来像 JSS 语法,而不是样式组件。
更改此:
const styles = theme => ({
root: {
...theme.typography.button,
backgroundColor: theme.palette.common.white,
padding: theme.spacing.unit,
">span": {
background: "red"
}
}
});
这样:
const styles = theme => ({
root: {
...theme.typography.button,
backgroundColor: theme.palette.common.white,
padding: theme.spacing.unit,
"& span": {
background: "red"
}
}
});
或者如果您不改变所有嵌套跨度
const styles = theme => ({
root: {
...theme.typography.button,
backgroundColor: theme.palette.common.white,
padding: theme.spacing.unit,
"& > h1 > span": {
background: "red"
}
}
});
试试这个codesandbox https://codesandbox.io/s/vm3qnmj75l
关于css - 如何设置嵌套元素的样式以与样式组件 react ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51022653/