是否可以定义一个可重复使用的样式组件列表，无需每次都重新定义所述样式组件？

Question

基本上，我要做的是创建一个具有可重用样式组件列表的单个组件，我可以立即使用这些组件，而无需重新定义/扩展所述样式组件。

对于具有可重用样式列表的组件，我目前导出一个具有所有可重用样式的对象，如下所示：

import styled from 'styled-components';
const ReusableStyles = {
    BgGreen : styled.div`
        background-color: #50ccb7;
        color: #FFF;
    `,
    TextLeft : styled.div`
        text-align: left;
        width: 50%;
    `
}
export default ReusableStyles;

我目前正在使用这些可重复使用的样式

import React from 'react'
import styled from 'styled-components'
import ReusableStyles from './reusableStyles.js'

const TestWithBgGreen = styled(ReusableStyles.BgGreen)`
`;

class Test extends React.Component {
    render() {
        return (
            <TestWithBgGreen>
                Test Text with green background
            </TestWithBgGreen>
        );
    }
}

export default Test;

现在我的问题是我每次使用它时都必须重新定义/扩展ReusableStyles.BgGreen，即使我没有添加任何样式属性。

我更喜欢像这样直接使用样式化组件：

<ReusableStyles.BgGreen>
    Test Text with green background
</ReusableStyles.BgGreen>

这显然行不通。

有没有什么方法可以创建一个单一的组件，其中包含一组可重复使用的样式，无需每次都重新定义/扩展该样式组件？

Answer 1

由于您导出和导入组件的方式，这不起作用。现在您将它们添加到一个对象，然后导出该对象。因此，您不得不通过 ReusableStyles 对象访问样式化组件。

这就是你想要做的：

const BgGreen = styled.div`
          background-color: #50ccb7;
          color: #FFF;
      `,
const TextLeft = styled.div`
       text-align: left;
       width: 50%;
      `

export { 
  BgGreen,
 TextLeft,

}

然后将它们导入为：

import {BgGreen} from './reusableStyles.js'

并将它们用作任何其他组件

<BgGreen>
My Text
</BgGreen>

如果您想保留可重用对象，另一种导出方式：

export { ... ReusableStyles }

如果您出于某种原因想要使用该对象，就像您已经在做的那样，您可以使用默认导出。