1

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

1 回答 1

3

首先，将样式化的组件移到函数范围之外，否则您的样式将在每次渲染时重置，您将遇到严重的性能问题。

其次，为了应用样式，您需要传递className属性。

请参阅样式化普通 React 组件

如果您使用 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>;
};
于 2020-06-10T10:25:10.957 回答