How do I access Material-ui's theme in Styled Component
As Horyd in the comment says, using the ThemeProvider
from Styled-Components
will give you access to the theme properties inside your styled component.
But Material-UI doesn't apply that theme anymore to its own components.
The workaround I found is as ugly as it is simple: Use both Themeproviders. So Material-UI applies the theme to its components and you can access the theme in your styled components.
import { ThemeProvider } from "styled-components";
import { MuiThemeProvider,StylesProvider } from "@material-ui/core/styles";
ReactDOM.render(
//Make sure the Material stylesheet is placed above your own
//styles so you can overwrite them
<StylesProvider injectFirst>
//Use the theme in the ThemeProvider for Material-UI so
//styles are applied to the Material-UI components
<MuiThemeProvider theme={theme}>
//Use also the ThemeProvider for Styled-Components so
//you can access the theme in your own css
<ThemeProvider theme={theme}>
//Include your app and you have acces to everything
<App />
</ThemeProvider>
</MuiThemeProvider>
</StylesProvider>,
document.getElementById("app"));
You could use withTheme :
App.js
import React from "react"
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles"
import { StyledButton } from "./StyledButton"
const App = () => {
const theme = createMuiTheme();
return (
<ThemeProvider theme={theme}>
<StyledButton />
</ThemeProvider>
)
}
export default App
StyledButton.js
import { styled, withTheme } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"
export const StyledButton= styled(withTheme(Button))(props => ({
background: props.theme.palette.background.paper,
}))
Problem Solved!
The solution is to use:
import { ThemeProvider } from "styled-components";
in App.js then the theme
is there with all the values on the props
object.
I used ThemeProvider from "@material-ui/styles" in App.js
import { StylesProvider, ThemeProvider } from "@material-ui/styles";
That doesn't play well with `import styled from "styled-components" in StyledApp.js
The working two files:
App.js
import React from "react";
import "./App.css";
import { StylesProvider } from "@material-ui/styles";
import { ThemeProvider } from "styled-components";
import { createMuiTheme } from "@material-ui/core/styles";
import { StyledButtonUsingTheme } from "./StyledApp";
function App() {
const defaultTheme = createMuiTheme();
window.console.log("Default theme passing to ThemeProvider", defaultTheme);
return (
<StylesProvider injectFirst>
<ThemeProvider theme={defaultTheme}>
<div className="App">
<StyledButtonUsingTheme variant="outlined">
Styled Button Using Theme
</StyledButtonUsingTheme>
</div>
</ThemeProvider>
</StylesProvider>
);
}
export default App;
StyledApp.js
import styled from "styled-components";
import Button from "@material-ui/core/Button";
export const StyledButtonUsingTheme = styled(Button)`
//Below will work now!
background-color: ${props => props.theme.palette.error.light};
`;