Emotions.js или Styled-компоненты Что предоставляет ThemeProvider? - PullRequest
Новая
       16

Emotions.js или Styled-компоненты Что предоставляет ThemeProvider?

0 голосов
/ 11 октября 2019

Кажется, тема - это просто объект javascript.

Можем ли мы определить тему в файле javascript и импортировать ее, когда нам нужно?

Так что ThemeProvider избавляет вас от необходимости делать manual import?

1 Ответ

0 голосов
/ 11 октября 2019

Идея ThemeProvider заключается в том, что он автоматически передает объект темы, который вы создаете, вниз по дереву рендеринга в качестве реквизита, поэтому вам не нужно делать это вручную.

Чтобы ответить на ваш вопросболее подробно, скажем, вы хотите создать темную и светлую тему в своем веб-приложении. Есть два способа сделать это: либо передать объект темы вручную компонентам на основе стиля активной темы, либо вы можете просто передать его один раз, и онпозаботится обо всем.

Вот небольшой пример: 

const lightTheme = {
  backgroundColor: "#fff",
  color: "#000"
}

const darkTheme = {
  backgroundColor: "#000",
  color: "#fff"
}

const Heading = styled.h1`
  color: ${props => props.theme.color};
` 

export const App = () => {
  const [darkThemeActive, setdarkThemeActive] = useState(false);

  return (
    <ThemeProvider theme={darkThemeActive ? darkTheme : lightTheme}>
      <Heading>Hello world!!</Heading>
      {/* This will override the theme prop thats being passed to the Heading by ThemeProvider */}
      <Heading theme={{color: "green}}>Hello world!!</Heading>
    </ThemeProvider>
  )
}
...