我有样式组件，想迁移到 scss，答案

【问题标题】：I have styles components and want to migrate to scss,我有样式组件，想迁移到 scss，
【发布时间】：2021-05-26 03:11:23
【问题描述】：

我有一个这样的样式组件，想使用 scss 模块。

我将如何转换

background-color: ${({ theme }) => theme.secondary};
padding: ${({ theme }) => theme.switchPadding} 0;

到scss。我需要 mixins 什么的，请举个例子。

export const Container = styled.div`
  background-color: ${({ theme }) => theme.secondary};
  padding: ${({ theme }) => theme.switchPadding} 0;
  position: fixed;
  flex-direction: column;
  align-items: center;
`;

主题.ts

  export const Theme= {
    primary: '#fff',
    secondary: '#000',
 switchPadding: '3px',
};

提前谢谢你。

【问题讨论】：

您想将所有样式化组件移动到 SCSS 吗？或者只是这个特定的？还是我没有看到的其他替代方案？
我需要将所有样式化的组件移到单独的文件中，例如：navbar.module.scss 我只是不知道如何将这些类型转换为在 scss 中工作而不是样式化

标签： reactjs sass styled-components

【解决方案1】：

Material UI 使用基于 javascript 的样式解决方案 (JSS)，而不是像 SCSS 这样的 CSS 预处理器。

这意味着无法通过 SCSS 变量自定义 Material UI 主题。也无法访问您的 CSS/SCSS 样式中的主题。

【讨论】：

我不使用 Material UI。 theme 是组件导入 { ThemeProvider } from 'styled-components';我在上下文中使用 ThemeProvider