在样式化组件中使用 Material-ui 主题
Posted
技术标签:
【中文标题】在样式化组件中使用 Material-ui 主题【英文标题】：Using Material-ui theme in styled component 【发布时间】：2021-07-17 19:53:01 【问题描述】：需要在如下所示的样式组件中使用主题间距值，但没有成功。 当我第一次创建它时，样式被应用于按钮。但是现在，没有应用任何样式！
你可以在这里看到它：sandbox。
import React from "react";
import styled, ThemeProvider from "styled-components";
import
createMuiTheme,
ThemeProvider as MuiThemeProvider,
darken
from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const customTheme = createMuiTheme(
palette:
primary:
main: "#6772e5"
,
spacing: 8
);
const StyledButton = styled(Button)`
$( theme ) => `
background-color: $theme.palette.primary.main;
color: #fff;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
padding-left: 20px;
padding-right: $theme.spacing(2);
font-size: 13px;
&:hover
background-color: $darken(theme.palette.primary.main, 0.2);
`
`;
export default function App()
return (
<MuiThemeProvider theme=customTheme>
<ThemeProvider theme=customTheme>
<StyledButton>Customized</StyledButton>
</ThemeProvider>
</MuiThemeProvider>
);
【问题讨论】：
使用StylesProvider 组件，如图所示here。
【参考方案1】：
您的 styled-component 样式被默认的 JSS 样式覆盖。默认情况下，JSS 样式被注入到 <head> 的底部（更高的 CSS 特异性）。您可以通过将组件树放在<StylesProvider injectFirst> 中来告诉 MUI 覆盖 JSS 样式。见controlling priority。
// tell MUI to inject JSS style first, so styled-component can override it
<StylesProvider injectFirst>
<MuiThemeProvider theme=customTheme>
<ThemeProvider theme=customTheme>
<StyledButton>Customized</StyledButton>
</ThemeProvider>
</MuiThemeProvider>
</StylesProvider>
【讨论】：
很好！但是 padding-right 仍然没有使用 theme.spacing 值。如何解决？ @killjoy theme.spacing(2) 返回一个没有单位的数字。您需要在末尾附加px 单元。我已经为你更新了现场演示。
我可以在每个组件基础上使用 injectFirst用于设置injectFirstNode，这是一个模块范围的变量，所以只有app范围。 Source以上是关于在样式化组件中使用 Material-ui 主题的主要内容，如果未能解决你的问题，请参考以下文章
使用 React.js 和 Material-UI 简化样式化的组件媒体查询
从库导入的 React 组件的 Material-Ui 主题化问题
如何使用 react-testing-library 测试包装在 withStyles 中的样式化 Material-UI 组件？