如何在具有样式化组件的其他组件中更改单个组件的样式？

Question

我正在开发一个带有样式组件的反应应用程序，我有一个组件“导航”。在这个组件中有更多的组件，如，等。Header例如是这样声明的：

const Header=styled.div'高度： 48px；宽度： 100%；过渡：所有0.5s易入；

问题是，我在不同的文件中有这个导航组件，对于所有文件，样式都很好，但现在我只想在其中一个文件中更改标题组件的背景色，它位于（？）导航组件。我该怎么做？我知道可以用const NewNav=styled（导航）之类的东西从导航组件更改样式，`但是标题呢？

先谢谢你。

Answer 1

您可以通过导航组件将道具传递到标题。

<NavigationExample secondary />

import styled, { css } from 'styled-components';

function NavigationExample(props) {
  const { secondary } = props;

  return (
    <Navigation>
      <Header secondary={secondary}>
        ...
      </Header>
      <Profile>
        username
      <Profile>
    </Navigation>
  );
}

const Navigation = styled.nav;

const Header = styled.header`
  /* Base styles */
  width: 100%;
  height: 60px;
  background: #222;
  color: #fff;

  ${props => props.secondary && css`
    background: #fff;
    color: #000;
  `;
`;

const Profile = styled.div``;

export default NavigationExample;

或者，您可以在css中内嵌道具。

<NavigationExample backgroundColor="#222" />

const Header = styled.header`
  /* Base styles */
  width: 100%;
  height: 60px;
  background: ${props => props.backgroundColor || '#222'};
  color: ${props => props.backgroundColor ? '#000' : '#fff'}; /* Adjusting text so it's legible like the previous example */
`;