样式不会在样式化组件中被覆盖答案

【问题标题】：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 是你自己的组件吗？能发下它的源代码吗？

标签： reactjs material-ui styled-components react-material

【解决方案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

【讨论】：