Emotions.js or Styled-components What does ThemeProvider provides?

Question

It seems theme is just a javascript object.

Can we define theme in a javascript file and import them when we need?

So ThemeProvider saves you from having to do manual import ?

Answer 1

The idea behind the ThemeProvider is that it will automatically pass the theme object that you create down the render tree as props, so you don't have to manually do that.

To answer your question in more detail lets say you want to provide a dark and light theme in your web app there are two ways you can do that either passing the theme object manually to the components based on the active theme style or you could just pass it once and it will take care of everything.

Here's a small example:

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>
  )
}