[英]material-ui makeStyles: how to style by tag name?
I want to add a rule for all <p>
in the current component.我想为当前组件中的所有<p>
添加规则。 I couldn't find information anywhere (material-ui documentation, Stack Overflow, etc.) on how to add CSS rules by tag name.我在任何地方都找不到有关如何按标签名称添加 CSS 规则的信息(material-ui 文档、堆栈溢出等)。
Is it not supported?不支持吗?
I'm trying to do something like this:我正在尝试做这样的事情:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'p': {
margin: 0,
},
someClass: {
fontSize: 14,
},
})
);
EDIT:编辑:
Using Ryan's solution works, but creates a new problem:使用 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>
);
};
Since you want this scoped to your component, you need a class to apply to your component (eg classes.root
in the example below).由于您希望将此范围限定为您的组件,因此您需要一个 class 来应用于您的组件(例如,下面示例中的classes.root
)。 Then you can target all p
elements within that using & p
.然后,您可以使用& p
定位其中的所有p
元素。 If you then need to override the p
tag styling for another CSS class within your component, you can use another nested rule to target p
tags that also have that class (eg classes.title
in the example).如果您随后需要在组件中覆盖另一个 CSS class 的p
标签样式,您可以使用另一个嵌套规则来定位也具有该 class 的p
标签(例如,example.title 中的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>
);
}
Related documentation: https://cssinjs.org/jss-plugin-nested?v=v10.1.1#use--to-reference-selector-of-the-parent-rule相关文档: https://cssinjs.org/jss-plugin-nested?v=v10.1.1#use--to-reference-selector-of-the-parent-rule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.