我正在尝试对已设置样式的组件进行样式设置。但是新规则中的样式不会应用到输出CSS中。
我可以为已经设置样式的组件设置样式吗?
在此先感谢您的帮助。
编辑:添加其余的LanugageChooser定义
#include <cstdio>
#include <iostream>
#include "../../Library/src/include/test.h"
int main() {
test t1(40);
t1.test_list.push(25);
t1.test_list.push(5);
t1.test_list.push(50);
t1.test_list.push(250);
for (int i = 0; i < t1.test_list.getsize(); i++) {
std::cout << t1.test_list[i] << std::endl;
}
t1.print();
t1.increment();
t1.print();
std::cout << "Hello World from normal file" << std::endl;
return 0;
}
// COMPONENT THAT I'M TRYING TO STYLE
const LanguageChooser = () => {
const Container = styled.div`
display: flex;
align-items: center;
height: 36px;
& > div:not(:last-child) {
margin-right: 5px;
}
`;
return (
<Container>
<Flag { ...languages.pl }/>
<Flag { ...languages.en }/>
</Container>
)
}
const Flag = ({ flag, language }) => {
const { i18n } = useTranslation();
const Button = styled.div`
cursor: pointer;
font-size: 24px;
transition: .2s all;
&:hover {
font-size: 36px;
}
`;
return (
<Button onClick={ () => i18n.changeLanguage(language) }>{ flag }</Button>
)
}
答案 0 :(得分:2)
首先,将样式化的组件移出功能范围,否则您的样式将在每个渲染器上重置,并且会遇到严重的性能问题。
第二,要应用样式,您需要传递className
属性。
请参见Styling normal React components
如果使用styled(MyComponent)表示法,并且MyComponent不呈现传入的className属性,则将不应用任何样式。
const Container = styled.div`
display: flex;
align-items: center;
height: 36px;
& > div:not(:last-child) {
margin-right: 5px;
}
`;
const LanguageChooser = ({ className }) => {
return (
<Container className={className}>
<Flag {...languages.pl} />
<Flag {...languages.en} />
</Container>
);
};
const Button = styled.div`
cursor: pointer;
font-size: 24px;
transition: 0.2s all;
&:hover {
font-size: 36px;
}
`;
const Flag = ({ flag, language }) => {
const { i18n } = useTranslation();
return <Button onClick={() => i18n.changeLanguage(language)}>{flag}</Button>;
};