无法使用 css 影响子元素答案

【问题标题】：Unable to affect child elements with css无法使用 css 影响子元素
【发布时间】：2022-01-24 10:07:39
【问题描述】：

将 CSS 类放在元素父级上时。我无法为子元素更改文本，这是有原因的吗？我当前的代码：

<Box 
   //does not effect all child elements                  
                  sx={{
                    color: 'red',
                    fontSize: 20,
                    fontWeight: 'medium',
                  }}>
                <Typography
    //element changes
                  sx={{
                    color: 'red',
                    fontSize: 20,
                    fontWeight: 'medium',
                  }}
                >
                  Salary: $30,000
                </Typography>
                <Typography>Year groups: Y1 - Y5</Typography>
                <Typography>Period: Full Time, Permanent</Typography>
                <Typography>Start time: 9:00am</Typography>
                <Typography>Start date: 01/04/2021</Typography>
                <Typography>NQT Required</Typography>
                <Typography>Apply by: 14 Jan 2002</Typography>
                <Typography>Job was posted: 16 Dec 2021</Typography>
</Box>

【问题讨论】：

Typography 可能具有覆盖任何父样式的默认样式。要自定义 Typography，您必须直接覆盖 Typography 样式。
我不认为所有的css属性都是默认继承的。如果你想动态继承属性，你必须用声明它们：inherit;从父母 css (stackoverflow.com/questions/25997355/…) 继承。
Harkunwar 是对的，如果您只运行您发布的代码，它就可以正常工作。可能是您为排版设置的样式。

标签： css reactjs material-ui

【解决方案1】：

您可以导入一个 css 文件，其中包含您想要添加到 Typography 的自定义编辑，但您将在每个属性的末尾添加 !important。

.example{ color:"red" !important }

这将覆盖material-ui的默认颜色

【讨论】：