Question

我在ReactJS的两个不同组件上使用相同样式的组件。我想知道是否可以使用一种存储在另一个文件中的mixin并将其导出，然后在每个ReactJS组件上调用它们？这样可以避免重复代码。

// Repeated styles

const TitleInflow = styled.h1`
  text-align: center;
  margin-top: 70px;
  padding-bottom: 50px;
`;

const Table = styled.table`
  margin: 0 auto;
  margin-top: 100px;
`;

const ThTable = styled.th`
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
`;

Answer 1

解决方案1：您可以创建一个通用文件，例如：

Common.js

const Common = `
 // style you want.
 padding: 5px; 
 color: red;
`
export default Common

并将其添加到样式化的组件中，例如

Components.js

import Common from './common'

const TitleInflow = styled.h1`
  ${Common};
  text-align: center;
  margin-top: 70px;
  padding-bottom: 50px;
`;

解决方案2：您可以创建一个组件并对其进行扩展：

这里是要扩展的组件：

const Component = styled.p`
   color: red; 
   fontSize: 12px;
`

扩展样式，例如：

const NewComponent = styled(Component)`
    // new style you want.
    display: flex;
`

，如果您想使用另一个html标签扩展样式，则可以在使用时喜欢它：

 <NewComponent as="h1"/>

避免在样式化组件中重复代码

1 个答案: