Style
The StyleProvider
helps you configure your custom theme in one place.
The StyleProvider
accept a theme object which you can override:
export default {
// Global
primaryColor: "#2199e8",
secondaryColor: "#777777",
successColor: "#3adb76",
warningColor: "#ffae00",
alertColor: "#ec5840",
lightGray: "#f3f3f3",
mediumGray: "#cacaca",
darkGray: "#8a8a8a",
black: "#0a0a0a",
white: "#fefefe",
preColor: "#ff6908",
globalWidth: "580px",
globalWidthSmall: "95%",
globalGutter: "16px",
bodyBackground: "#f3f3f3",
containerBackground: "#fefefe",
globalPadding: "16px",
globalMargin: "16px",
globalRadius: "3px",
globalRounded: "500px",
// Grid
gridColumnCount: 12,
containerRadius: 0,
// Block Grid
blockGridMax: 8,
// Typography
globalFontColor: "#0a0a0a",
bodyFontFamily: "Helvetica, Arial, sans-serif",
globalFontWeight: "normal",
globalLineHeight: "130%",
globalFontSize: "16px",
h1FontSize: "34px",
h2FontSize: "30px",
h3FontSize: "28px",
h4FontSize: "24px",
h5FontSize: "20px",
h6FontSize: "18px",
headerMarginBottom: "10px",
paragraphMarginBottom: "10px",
smallFontSize: "80%",
smallFontColor: "#cacaca",
leadLineHeight: "160%",
textPadding: "10px",
subheaderLineheight: "1.4",
subheaderColor: "#8a8a8a",
subheaderMarginTop: "4px",
subheaderMarginBottom: "8px",
hrBorder: "1px solid #0a0a0a",
hrMargin: "20px auto",
hrAlign: "center",
anchorTextDecoration: "none",
statFontSize: "40px",
removeIosBlue: "true",
// Button
buttonPadding: {
tiny: "4px 8px 4px 8px",
small: "5px 10px 5px 10px",
default: "8px 16px 8px 16px",
large: "10px 20px 10px 20px",
},
buttonFontSize: {
tiny: "10px",
small: "12px",
default: "16px",
large: "20px",
},
buttonColor: "#fefefe",
buttonColorAlt: "#cacaca",
buttonFontWeight: "bold",
// Callout
calloutBackground: "#fefefe",
calloutBackgroundFade: "0.39",
calloutPadding: "10px",
// Menu
menuItemPadding: "10px",
menuItemGutter: "10px",
// Thumbnail
thumbnailBorder: "solid 4px #fefefe",
thumbnailShadow: "0 0 0 1px rgba(#0a0a0a, 0.2)",
thumbnailTransition: "box-shadow 200ms ease-out",
};
Example
import { StyleProvider, Button } from "@muil/components";
const customTheme = { primaryColor: "#ff0000" };
<StyleProvider theme={customTheme}>
<Button href="#">Button</Button>
<Button href="#" tiny>
Tiny Button
</Button>
<Button href="#" small>
Small Button
</Button>
<Button href="#">Default Button</Button>
<Button href="#" large>
Large Button
</Button>
</StyleProvider>;
Properties
Property | Type | Description |
---|---|---|
theme | Object | custom object theme |
className | String | class name |
style | Object | style |