将样式从mui 5样式组件中的某个组件中分离出来[情感]

Question

希望每个人都做得好，想问一些关于mui5风格组件(在引擎盖下使用情感的组件(的问题。我想知道是否有一种合适的方法，一个标准，如果你愿意的话，把样式从我的组件中分离出来，放在另一个文件中。

Answer 1

注意：此解决方案NOT使用样式组件

我知道这篇文章有点过时了，但这里有一个模式，我在使用MUI5时，在自定义样式的react应用程序中使用它。

假设我们在一个名为Header.tsx的自定义组件中有一个AppBarMUI组件，该组件通过ThemeProvider应用了样式，但我也有一些自定义div，我想使用我的主题样式为…添加背景色

页眉.tsx->组件文件

import { useTheme } from '@mui/material/styles';
import { styles } from './Header.styles.ts'; // custom css styles function
export default function Header() {
const theme = useTheme();
const { logoWrapStyle, headTextStyle } = styles(theme);

return (
<AppBar>
<div style={logoWrapStyle}>
<svg>...logo_code_here...</svg>
</div>
<div style={headTextStyle}>
RED TEXT IN MY HEADER
</div>
</AppBar>
)
}

页眉样式.ts->包含自定义样式的文件

export const styles = (theme: any) => {
logoWrapStyle: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
headTextStyle: {
color: 'red',
}
}

不确定这种方法是否有什么大的缺点，但我真的很喜欢我可以创建自定义的"；一次性"；样式以及访问ThemeProvider包装器在根myReact组件树附近提供的主题上下文。

我只是为了方便而对样式进行分解，这可能不是必要的，但会导致更干净的最终代码。这就是我将样式命名为logoWrapStyle和headTextStyle的原因——只是为了在代码中进行澄清。我很快就知道这是我的Header.styles.ts文件中的一个样式。

下面是一个代码沙盒，其中包含上述方法的一个工作示例：

https://codesandbox.io/s/mui5-separate-style-file-example-zmqdv0?file=/src/App.tsx

希望这能帮助到遇到它的人！

打开代码

PS:我给传递给我的样式函数的主题参数的类型是any，，但如果你想使用正确的类型，那就去吧！