如何将风格系统与反应材料相结合？

Question

我想在我的项目中使用样式系统，这是管理面板。我在React材料的基础上建立了项目，我有很多不同的表单，有输入，选择，复选框等等。在许多地方，我必须为元素设置一些页边距/填充，我使用一些自定义的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>

​

但后来我明白了react-material有很多组件，我必须做什么？重写所有它们以获得一些相似的风格？或者哪种方式更舒服？

Answer 1

因此，您所要求的内容肯定可以在不向标记中添加太多噪声的情况下实现。

首先，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-component中使用所有styled-system风格的键。

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

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

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

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