I am using styled components, I am wondering if it is necessary to use a ThemeProvider.
This is the example in the documentation.
// 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;
/* Color the border and text with theme.main */
color: ${props => props.theme.main};
border: 2px solid ${props => props.theme.main};
`;
// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
theme: {
main: "palevioletred"
}
}
// Define what props.theme will look like
const theme = {
main: "mediumseagreen"
};
render(
<div>
<Button>Normal</Button>
<ThemeProvider theme={theme}>
<Button>Themed</Button>
</ThemeProvider>
</div>
);
But I am wondering if I can just do this:
// theme.js
const theme = {
main: "mediumseagreen"
};
export default theme;
// main.js
import theme from 'theme';
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
color: ${theme.main};
border: 2px solid ${theme.main};
`;
render(
<div>
<Button>Themed</Button>
</div>
);
If I don't need to a Normal Button
(all Buttons will be themed), and I don't need dynamic theming (e.g change to a dark mode), could I use the second approach? are there any drawbacks I didn't think of?
Yes, this is valid code.
But it has some drawbacks. ThemeProvider
provides a theme by using the React Context API. Via the Context API information is passed down a component tree so that every child has access to the context and can access the including information (theme in this case). By doing it the way you suggested, you get some limitations:
ThemeProvider
;