样式化组件中的实用程序类反应答案

【问题标题】：utility classes in styled component react样式化组件中的实用程序类反应
【发布时间】：2019-08-08 11:43:53
【问题描述】：

嗨，我在反应中使用样式化组件

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};

如何在样式化组件上实现这一点？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

最好的解决方案之一是使用 https://styled-system.com/，它与 Styled Components 和其他库（如 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，它与 Styled Components 一起使用 https://codesandbox.io/s/styled-components-with-styled-system-njr17

【讨论】：

【解决方案2】：

你可以使用像

这样的变量

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

您可以在单独的文件中定义这些变量并将它们导入样式组件

【讨论】：

好。我可以直接在 jsx 上获得这个值吗？像
bcz 不喜欢改变 h4 风格，我在这里密封了一些边缘案例。这个地方只有我的 H4 不同
如果您只是在使用样式组件的 jsx 上添加 class="space-btn" 怎么办？我认为它会保留它
刚才我做到了。我不知道这是否是最佳实践

【解决方案3】：

您可以在 React 树的顶部组件中定义实用程序类。该示例使用 Gatsby.js，但您可以轻松地将其改编为其他 React 框架。

// src/components/layout.js
const GlobalStyles = createGlobalStyles`
  html {
    /* Put your CSS variables here*/
  }
  .m-b-10 {
    margin-bottom: 10px;
  }
`

然后使createGlobalStyles 中定义的任何内容都可用于子组件中的访问。

// src/components/layout.js
export default function Layout({ children }) {
  return (
    <React.Fragment>
      <GlobalStyle />
      {children}
    </React.Fragment>
  )
}

// src/pages.index.js
import Layout from "../components/layout"
const H4 = styled.h4`
  font-size: 15px;
  letter-spacing: 0.38px;
  line-height: 1.33;
  color: red;
  padding: 20px;
`;
const IndexPage = () => {
  return (
    <Layout>
      <H4 className="m-b-10" />
    </Layout>
  )
}

【讨论】：

​​