包装样式的功能

问题描述

目前，我正在使用带有这种样式的组件的顺风车。

const Container = styled.div.attrs({ 
    className: 'flex flex-col h-screen justify-center items-center' 
})`
    background-color: white;
`;

我想创建一个“包装器”功能，我可以这样称呼

const Container = myStyled('div','flex flex-col h-screen justify-center items-center')`
    background-color: white;
`;

const Container2 = myStyled(Container,'text-6xl')`
    background-color: red;
`;

如何创建可以接受参数的带标签的模板文字字符串，然后将其从样式化的组件传递到styled？

解决方法

样式化的组件可以使用styled(otherStyledElement)被其他样式化的组件包装，如下所示：

import React from "react";
import styled from 'styled-components';

export default function App() {
  return (
    <Container>
      <h1>Hello CodeSandbox</h1>
      <Container2>
      <h2>Start editing to see some magic happen!</h2>
      </Container2>
    </Container>
  );
}

const Container = styled.div.attrs({ className: 'df'})`
  background: red;

`;

const Container2 = styled(Container).attrs({ className: 'df'})`
  background: blue;
`;

CodeSandbox示例：https://codesandbox.io/s/stack-63996579-styles-stacked-thwf3