javascript - 如何使用样式组件更改其他组件中单个组件的样式？(How to change the style of a single component within an other component with styled-components?)

Question

I'm working on an react app with styled-components and I have a component 'Navigation'.

(我正在使用具有样式组件的React应用程序，并且有一个组件“ Navigation”。)

In this component are more components like , , etc. Header for example is declared like this:

(在此组件中，还有更多组件，如，等。例如，标头声明如下：)

const Header = styled.div` height: 48px; width: 100%; transition: all 0.5s ease-in;

Thing is that I have this Navigation component in different files and for all of them the styling is good but now I want to change the background color of the Header component in just one of those files, which is within(?) the Navigation component.

(问题是我在不同文件中都有这个Navigation组件，对于所有文件而言，样式都不错，但是现在我只想在其中一个文件中更改Header组件的背景色，该文件位于Navigation组件之内。)

How can I do that?

(我怎样才能做到这一点？)

I know that it's possible to change the styling from the Navigation component with something like const NewNav = styled(Navigation)`` but what about the Header?

(我知道可以使用const NewNav = styled（Navigation）``之类的东西从Navigation组件更改样式，但是Header呢？)

Thank you in advance.

(先感谢您。)

  ask by Krys translate from so

Answer 1

You can pass props through your navigation component to your header.

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

<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;

Alternatively, you can inline props in your css .

(或者，您可以在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 */
`;