Styled-components: стили не применяются при попытке стилизовать уже стилизованный компонент

Я пытаюсь стилизовать свой компонент, который уже был стилизован. Но стили в новых правилах не применяются в выходном CSS.

Могу ли я стилизовать компонент, который я уже стилизовал?

Заранее благодарим вас за помощь.

РЕДАКТИРОВАТЬ: добавить остальную часть определения LanugageChooser

// 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>
    )
}

// TRYING ADD MARGIN LEFT, BUT THERE IS NO RESULT.
// ANY OTHER CSS PROPERTY ARE NOT APPLYING
const Navbar = ({ color }) => {
    ...

    const StyledLanguageChooser = styled(LanguageChooser)`
       margin-left: auto;
    `;

    const Nav = styled.nav`
        display: flex;
        align-content:center;
        background: ${ color };
        padding: 2px 3px;
    `;

    return (
        <Nav className="navbar">
            <StyledNavLink to="/home">...</StyledNavLink>
            <StyledNavLink to="/maps">...</StyledNavLink>
            <StyledNavLink to="/charts">...</StyledNavLink>
            <StyledLanguageChooser/>
        </Nav>
    )
}

reactjs styled-components css-in-js
person Piterowsky    schedule 10.06.2020    source источник
comment
Не могли бы вы также предоставить свое определение LanguageChooser?   -  person konekoya    schedule 10.06.2020
comment
Я добавил определение LanguageChooser. Если вам нужен доступ ко всем проектам, дайте мне знать.   -  person Piterowsky    schedule 10.06.2020

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, переместите стилизованный компонент за пределы функции, иначе ваш стиль будет сбрасываться при каждом рендеринге, и вы столкнетесь с серьезными проблемами с производительностью.

Во-вторых, чтобы применить стили, вам нужно передать свойство className.

См. Стилизацию обычных компонентов React

Если вы используете стилизованную нотацию (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>;
};
person Dennis Vash    schedule 10.06.2020