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

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 }

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

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

Is it possible to define a list of re-usable styled components that can be used without having to redefine said styled component each time?

reactjs

styled-components