在mui 5 styled-components中将样式与组件分开[情感]

Question

希望大家一切都好，想问一些关于 mui 5 样式组件（在引擎盖下使用情感的组件）的问题。我想知道是否有合适的方法（如果您愿意的话）将样式从我的组件中分离出来并将其放在另一个文件中。

Answer 1

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

我知道这篇文章有点旧，但这是我在使用 MUI5 时在我的 React 应用程序中用于自定义样式的模式。

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

Header.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>
  )
}

Header.styles.ts -> 包含自定义样式的文件

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

不确定这种方法是否有任何大的缺点，但我真的很喜欢我可以创建自定义的“一次性”样式以及访问由 ThemeProvider 包装器提供的主题上下文，靠近我的 React 组件树的根.

我只是为了方便而解构样式，这可能不是必需的，但会导致最终代码更清晰。这就是我将样式命名为 logoWrapStyle 和 headTextStyle 的原因 - 只是为了在代码中进行说明。我很快知道这是我单独的 Header.styles.ts 文件中的样式。

这里有一个 codesandbox，其中包含上述方法的一个工作示例：

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

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

代码。

PS： 我将传递给我的样式函数的主题道具设为任意类型，但如果您想使用适当的类型，请使用它！