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

EN

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

样式组件使应用程序更加干净(比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>

在我的项目中，我使用了这样的东西。我使用了来自Material UI的组件，并将它传递到styled-components中，这样我就可以编写普通的CSS了。覆盖材料UI样式是一个蛋糕步行，因为我可以查找MUI文档，以找到适当的类名，并覆盖它的样式。

此外，从该文件返回的组件只不过是一个实质性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;
  }
`;

希望这能帮上忙。

我花了很多时间自己回答一个类似的问题：如何最好地在MUI中创建自定义样式组件

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