1

我想在我的项目中使用样式系统，即管理面板。我基于 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>

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

4

1 回答 1

1

所以你所要求的绝对可以在不给标记添加太多噪音的情况下实现。

首先，该styled标记适用于所有 material-ui 组件。幸运的是，styled-system它还可以与styled-components. 所以你可以这样做

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

那个访问器调用get有点独特，它来自这个包。它允许您styled-system使用styled-component.

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

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

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

查看官方的 build-a-box 教程以获得更好的洞察力。

于 2021-03-22T15:24:07.513 回答