Mui 中的样式化组件工作流程 - 如何样式化

Question

我正在开发一个新的反应项目，并使用带有样式组件的材料 ui，并且在样式和组织方面遇到了一些麻烦。 我已经阅读了样式化组件和最佳实践，但我仍然无法在大型项目中找到样式化解决方案。

我看过很多建议：

• 为每次需要添加一些 css 并将所有这些组件存储在 styled.ts 文件中创建样式组件。 这种方法将所有样式和布局问题删除到一个单独的文件中，但是为所有内容创建样式组件需要大量工作
• 围绕主要反应组件制作包装器样式的组件并使用 class 名称 - 有点像定期导入 css 文件并使用类
• 如果需要一些填充或某些东西，则使内联 css 发生变化，并且只为可重用/更长的 css 块制作样式组件。 并没有真正分离样式并且不那么干净，因为我们要离开内联 css 但更容易编写
• 要将样式化组件视为常规组件，请将它们放在单独的文件和所有内容中。 组件就是组件，不再需要区分stlying和componentization

并不是说这些都是不好的建议，但它们非常矛盾，我没有这方面的经验。 我只想知道一种可扩展的方法。

tldr：在大型项目中使用样式化组件是否有一个良好且干净的工作流程？

Answer 1

Material UI和styled-components是为了在应用中实现不同的目的。 MUI有其他人编写的 ui，您可以在应用程序中使用以节省时间，但是您必须使用自定义 css 自定义它们覆盖。 styled-component将帮助组织您的自定义 css

styled-component 使应用程序超级干净（优于 CSS 的可读性）和易于维护（优于 CSS 的可维护性）。

• 可以轻松识别正在使用的 CSS，并且您可以轻松删除未使用的样式。
• 它通过具有全局主题的道具使动态样式变得非常简单。
• 您可以在项目中的任何位置导入您的样式并重新使用它。

您应该根据自己的方便在项目中的任何位置制作style.js / style.ts 。 作为最佳实践，您应该创建一个/多个global\style.js ，您可以在其中保留项目的所有可重用组件。 和style.js在您的组件文件夹中仅用于该组件的styles 。

为了充分利用在 JS 模式中使用 CSS（在您的情况下它是styled-component ），您应该将它与styled-system一起使用，它将帮助您轻松地以最少的代码使您的 ui 组件响应并帮助构建最佳的可重用组件你的申请。 在此处查看详细信息

以下是一些根据需要使用样式系统的示例，

假设您想创建一个卡片容器以在应用程序 UI 中的任何位置使用，

import theme from './themes/theme';
import styled from 'styled-components';
export const Card = styled.div`
  transition: ....;
  background: ${(props) => (props.backColor || theme.colors.defaultColor)};
  box-shadow: 1px 1px 1px rgb(. . . / .%);
  border-radius: 8px;
  ...
`;

在您的应用程序中的任何地方使用它，

  import {Card, ..} from './style.js'
    
    <Card>
      ....
    </Card>
    
    <Card backColor={'#some-color-code'}>
      ....
    </Card>

Answer 2

我花了很多时间试图自己回答一个类似的问题： How best to create custom styled components in MUI

恐怕答案是 MUI 没有好的解决方案。

Answer 3

在我的项目中，我使用了类似的东西。 我使用了来自Material UI的组件并将其传递给styled-components以便我可以编写普通的 CSS。 覆盖 Material UI 样式是小菜一碟，因为我可以查看 MUI Docs 以找到合适的类名并覆盖它的样式。

此外，从该文件返回的组件只不过是 Material UI 组件本身，而是它的样式化版本。 这也允许我在我的 JSX 代码中使用所有与 MUI 相关的道具。

import { Button } from "@material-ui/core";
import styled from "styled-components";

export const StyledButton = styled(Button)`
  &.MuiButton-root {
    border-radius: 5px;
    font-family: ${fonts.heebo};
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
  }
`;

希望这可能会有所帮助。