Макетирование темы в стилизованных компонентах

Question

мои тесты не пройдены, потому что мои стилизованные компоненты используют тему, переданную из стилевых компонентов <ThemeProvider />

, но когда я делаю это:

background-color: ${({ theme }) => theme.backgroundColor};

все в порядке

но когда я делаю

background-color: ${({ theme }) => theme.background.color};

, он взрывается, говоря, что не может read color of undefined, и я запутался, почему он допускает одно, а не другое?

в самом коде этоработает нормально, но тесты не проходят, как я могу передать тему, чтобы тесты снова прошли?

и почему это работает для первого, а не для второго?

Answer 1

Это потому, что фон не определен в объекте темы, и вы получаете сообщение об ошибке cannot read property color of undefined.Вы можете переопределить / добавить некоторые свойства в тему.Вы должны добавить background.color в тему.См. Темы стилевых компонентов , чтобы узнать, как определить некоторые свойства для темы и использовать их.

Этот пример для документов стилевых компонентов:

// Define what props.theme will look like. this object can be imported as a global theme options.
const theme = {
  backgroundColor: "yellow", // -> `props.theme.backgroundColor
  // or
  background: { color: 'green' } // -> `props.theme.background.color
};  


// We are passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    backgroundColor: "red"
  }
}


// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* setting the background-color value from Theme options */
  background-color: ${props => props.theme.backgroundColor};
`;


render(
  <div>
    <Button> My background color would be 'Red' </Button>

    // Use <ThemeProvider /> to wrap your theme options to your components/elements.

    <ThemeProvider theme={theme}>
      <Button> My background color would be 'Yellow' </Button>
    </ThemeProvider>
  </div>
);