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