样式化组件中的实用程序类做出反应

Question

嗨，我在React中使用样式化的分量

const H4 = styled.h4`
  font-size: 15px;
  letter-spacing: 0.38px;
  line-height: 1.33;
  color: red;
  padding: 20px;
`;

<H4>Small header</H4>

它将在H4标签中提供精确的样式。但是如何使用m-b-10这样的实用工具类覆盖此填充，它将使margin-bottom:10px

类似<H4 m-b-10>small header</H4>

同一时间，我需要在任何需要的地方使用此实用工具类。在CSS中，我可以简单地编写

m-b-10{margin-bottom:10px !important};

如何在样式化的componenet上实现这些目标？

Answer 1

最好的解决方案之一是使用https://styled-system.com/，它可以与样式化组件和其他库（例如 Emotion ）配合使用，并提供您所需的在组件定义中使用实用程序类。

示例：

import styled from 'styled-components'
import { color, space, fontSize } from 'styled-system'

// Set default styles and add styled-system functions to your component
const Box = styled.div`

  /*defaut styles */
  color: white;
  font-size: 25px;
  padding: 20px;

  /* configurable properties */;
  ${color};
  ${space};
  ${fontSize};

`;

并使用它：

  <Box bg="black" >
    Lorem Ipsum
  </Box>  

  <Box bg="black" color="green" fontSize="12px" p="10px">
    Lorem Ipsum
  </Box>

该代码将呈现以下内容：

它还支持媒体查询，主题等。

您可以使用此 CodeAndSandbox ，将其与样式化的组件 https://codesandbox.io/s/styled-components-with-styled-system-njr17

一起使用

Answer 2

您可以使用类似变量

const m-b-10 = '20px';
const H4 = styled.h4`
   padding: ${m-b-10};
`;

您可以在单独的文件中定义此类变量，并将其导入样式组件