使用已设置样式的零部件覆盖它们

Question

我想在React中为我的软件套件创建一个模板主题，并允许开发人员为他们开发的每个软件自定义主题。

主题将在使用样式组件的库中发货

以下是代码示例：

import styled from 'styled-components'
const ButtonStyled = styled.button`
font-size: 1.5em;
text-align: center;
color: green;
`;
const TomatoButton = styled(ButtonStyled)`
color: tomato;
`;
//This is the default template
const DefaultTemplate = () => {
return <div>
<ButtonStyled className='button'>Button</ButtonStyled>
<TomatoButton className='tomato-button'>Button II</TomatoButton>
</div>
}
//This is the template styled by developers
const DefaultTemplateStyled = styled(DefaultTemplate)`
color: white;
&.button{
color: violet
}
&.tomato-button{
color: black;
}
`;
function App() {
return (<DefaultTemplateStyled />);
}
export default App;

在这个应用程序中，我看不到样式的覆盖，我是不是遗漏了什么？

Answer 1

在样式化组件中，您应该做的是像这样传递classNamepropm：

//This is the default template
const DefaultTemplate = ({ className }) => {
return (
<div>
<ButtonStyled className={`button ${className}`}>Button</ButtonStyled>
<TomatoButton className={`tomato-button ${className}`}>
Button II
</TomatoButton>
</div>
);
};

所有其他代码都很好