Solución:
Como dice Horyd en el comentario, usando el ThemeProvider
de Styled-Components
le dará acceso a las propiedades del tema dentro de su componente con estilo. Pero Material-UI ya no aplica ese tema a sus propios componentes.
La solución que encontré es tan fea como simple: Utilice ambos proveedores de temas. Entonces Material-UI aplica el tema a sus componentes y puede acceder al tema en sus componentes con estilo.
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"));
Podrías usar 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,
}))
¡Problema resuelto!
La solución es utilizar:
import { ThemeProvider } from "styled-components";
en App.js, entonces el theme
está ahí con todos los valores en el props
objeto.
Usé ThemeProvider de “@ material-ui / styles” en App.js
import { StylesProvider, ThemeProvider } from "@material-ui/styles";
Eso no funciona bien con `importar estilo de” componentes con estilo “en StyledApp.js
Los dos archivos de trabajo:
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};
`;