样式不会在样式化组件中被覆盖
Posted
技术标签:
【中文标题】样式不会在样式化组件中被覆盖【英文标题】:Styles are not getting overriten in the styled component in react 【发布时间】:2020-07-21 19:04:53 【问题描述】:我是 reac 新手,这里我使用的是材质 UI。
我设计了以下样式组件。
const StyledDefaultText = styled(Typography)<ISortBySelector>(( fontSize ) => (
fontSize: fontSize ? fontSize : '12px',
fontWeight: 'bold',
letterSpacing: fontSize ? '0.14px' : '0.09px',
color: '#000000'
))
现在,我在这里添加了这个样式,这个组件仍然使用typography
的默认样式加载。它不应用样式组件中的样式。
谁能帮我解决这个问题?
【问题讨论】:
Typography
是你自己的组件吗?能发下它的源代码吗?
【参考方案1】:
问题是,您的样式是在 material-ui 库的样式之前加载的(最后一个获胜)。你可以这样修复它:
import StylesProvider from '@material-ui/core/styles';
<StylesProvider injectFirst>
/* Your component tree.
Now, you can override Material-UI's styles. */
</StylesProvider>
见:https://material-ui.com/guides/interoperability/#controlling-priority-%EF%B8%8F-3
【讨论】:
以上是关于样式不会在样式化组件中被覆盖的主要内容,如果未能解决你的问题,请参考以下文章
使用样式化组件覆盖 antd Button 的样式不起作用?