如何解决包装样式的功能
目前,我正在使用带有这种样式的组件的顺风车。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。