样式不会在react的样式化组件中被覆盖

时间:2020-04-09 07:58:19

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

我是新手,这里我使用的是材料UI。

我设计了以下样式的组件。

const StyledDefaultText = styled(Typography)<ISortBySelector>(({ fontSize }) => ({
  fontSize: fontSize ? fontSize : '12px',
  fontWeight: 'bold',
  letterSpacing: fontSize ? '0.14px' : '0.09px',
  color: '#000000'
}))

现在,在这里我仍然添加了此样式,该组件仍使用typography的默认样式加载。它不应用样式组件中存在的样式。 有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

问题是,您的样式在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