如何将样式系统与反应材料相结合？

编程问答 2022-05-18

问题描述

我想在我的管理面板项目中使用 styled-system。我基于 React Material 构建了项目，我有很多不同的表单，包括输入、选择、复选框等。在许多地方，我必须为元素设置一些边距/填充，我使用一些自定义的 Box 组件来制作这一刻，该组件使用样式系统功能（空间、颜色等）。但最终我得到了一个相当繁琐的结构：

<Box>
  <Box mb={10}>
    <Box mr={2}><TextField/></Box>
    <Box mr={2}><TextField/></Box>
    <Box mr={2}><TextField/></Box>
  </Box>
  
  <Box>
    <Box mr={2}><Select/></Box>
    <Box mr={2}><Select/></Box>
    <Box mr={2}><Select/></Box>
  </Box>
</Box>

它只是组件的一小部分。我认为，在这种情况下，最好围绕 TextField/Select 组件创建一些包装器，这些包装器将为组件添加样式系统功能。 然后像这样使用它们：

<Box>
  <Box mb={10}>
    <TextField mr={2}/>
    <TextField mr={2}/>
    <TextField mr={2}/>
  </Box>
  
  <Box>
    <Select mr={2}/>
    <Select mr={2}/>
    <Select mr={2}/>
  </Box>
</Box>

但后来我明白反应材料有很多组件，我必须做什么？覆盖所有这些以获得一些相似的风格？或者有什么方法可以更舒服？

解决方法

因此，您的要求绝对可以在不向标记中添加太多干扰的情况下实现。

首先，styled 标记适用于 all material-ui components。幸运的是，styled-system 也可以与 styled-components 互操作。所以你可以这样做

const StyledButton = styled(TextField)`
  color: red;
  // to access theme in a styled-system way
  ${get("mt",3)};
`;

那个名为 get 的访问器有点独特，它来自这个 package。它允许您在 styled-system 中使用所有 styled-component 风味的键。

如果您想要所有材料组件的内联道具，就像您描述的那样，它会更复杂一些。您需要使用启用此类内联道具的适当装饰器包装每个组件。基本上是创建一个影子库。

import styled from 'styled-components';
import { variant,space,layout,position } from 'styled-system';

export default styled(TextField)(
  position,// whatever else
);

查看 official build-a-box tutorial 以获得更好的洞察力。

react-materialreactjsreactjsreactjsreactjsstyled-system