样式化的组件:尝试为已样式化的组件设置样式时不应用样式

时间:2020-06-10 09:55:13

标签: reactjs styled-components css-in-js

我正在尝试对已设置样式的组件进行样式设置。但是新规则中的样式不会应用到输出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>
    )
}

1 个答案:

答案 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>;
};