Question

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

Answer 1

首先，将样式化的组件移出功能范围，否则您的样式将在每个渲染器上重置，并且会遇到严重的性能问题。

第二，要应用样式，您需要传递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>;
};

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

1 个答案: