Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected.
You can view the problem here: sandbox.
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import {
createMuiTheme,
ThemeProvider as MuiThemeProvider,
darken
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const customTheme = createMuiTheme({
palette: {
primary: {
main: "#6772e5"
}
},
spacing: 8
});
const StyledButton = styled(Button)`
${({ theme }) => `
background-color: ${theme.palette.primary.main};
color: #fff;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
padding-left: 20px;
padding-right: ${theme.spacing(2)};
font-size: 13px;
&:hover {
background-color: ${darken(theme.palette.primary.main, 0.2)};
}
`}
`;
export default function App() {
return (
<MuiThemeProvider theme={customTheme}>
<ThemeProvider theme={customTheme}>
<StyledButton>Customized</StyledButton>
</ThemeProvider>
</MuiThemeProvider>
);
}