material-ui makeStyles:如何根据标签名称设置样式?
material-ui makeStyles: how to style by tag name?
我想为当前组件中的所有 <p>
添加规则。我无法在任何地方找到有关如何通过标签名称添加 CSS 规则的信息(material-ui 文档、Stack Overflow 等)。
不支持吗?
我正在尝试做这样的事情:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'p': {
margin: 0,
},
someClass: {
fontSize: 14,
},
})
);
编辑:
使用 Ryan 的解决方案有效,但产生了一个新问题:
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& p': {
margin: 0,
},
},
// I want this rule to override the rule above. It's not possible in the current configuration, because `.root p` is more specific than `.title`
// This problem originates from the fact that I had to nest the rule for `<p>` inside a CSS class
title: {
margin: '0 0 16px',
},
})
);
export default () => {
const classes = useStyles({});
return (
<div className={classes.root}>
<p className={classes.title}>My title</p>
<p>A paragraph</p>
<p>Another paragraph</p>
</div>
);
};
由于您希望将其限定在您的组件范围内,因此您需要 class 才能应用于您的组件(例如下面示例中的 classes.root
)。然后您可以使用 & p
定位其中的所有 p
元素。如果您随后需要覆盖组件中另一个 CSS class 的 p
标签样式,您可以使用另一个嵌套规则来定位 p
标签,这些标签也具有 class(例如示例中的 classes.title
)。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& p": {
margin: 0,
"&$title": {
margin: "0 0 16px"
}
}
},
title: {}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<p>This paragraph isn't affected.</p>
<p>This paragraph isn't affected.</p>
<div className={classes.root}>
<p className={classes.title}>My title</p>
<p>A paragraph</p>
<p>Another paragraph</p>
</div>
</div>
);
}
相关文档:https://cssinjs.org/jss-plugin-nested?v=v10.1.1#use--to-reference-selector-of-the-parent-rule
我想为当前组件中的所有 <p>
添加规则。我无法在任何地方找到有关如何通过标签名称添加 CSS 规则的信息(material-ui 文档、Stack Overflow 等)。
不支持吗?
我正在尝试做这样的事情:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'p': {
margin: 0,
},
someClass: {
fontSize: 14,
},
})
);
编辑:
使用 Ryan 的解决方案有效,但产生了一个新问题:
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& p': {
margin: 0,
},
},
// I want this rule to override the rule above. It's not possible in the current configuration, because `.root p` is more specific than `.title`
// This problem originates from the fact that I had to nest the rule for `<p>` inside a CSS class
title: {
margin: '0 0 16px',
},
})
);
export default () => {
const classes = useStyles({});
return (
<div className={classes.root}>
<p className={classes.title}>My title</p>
<p>A paragraph</p>
<p>Another paragraph</p>
</div>
);
};
由于您希望将其限定在您的组件范围内,因此您需要 class 才能应用于您的组件(例如下面示例中的 classes.root
)。然后您可以使用 & p
定位其中的所有 p
元素。如果您随后需要覆盖组件中另一个 CSS class 的 p
标签样式,您可以使用另一个嵌套规则来定位 p
标签,这些标签也具有 class(例如示例中的 classes.title
)。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
"& p": {
margin: 0,
"&$title": {
margin: "0 0 16px"
}
}
},
title: {}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<p>This paragraph isn't affected.</p>
<p>This paragraph isn't affected.</p>
<div className={classes.root}>
<p className={classes.title}>My title</p>
<p>A paragraph</p>
<p>Another paragraph</p>
</div>
</div>
);
}
相关文档:https://cssinjs.org/jss-plugin-nested?v=v10.1.1#use--to-reference-selector-of-the-parent-rule