Part II — Implementation

🌈  Setting up a centralized theme

💡 Why a centralized theme?
  

➡️  Design system

• Colors ( Docs )
• Material Palette Generation

• Typography ( Docs )

Configuration [ Docs ]

App configuration

// src/index.js 
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { red } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

...

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

🤢  Our button is ugly!

Let’s make it blue 500 and Nunito Sans as typography:

const theme = createTheme({
	palette: {
		primary: {
			main: blue[500],
		},
	},
	typography: {
    fontFamily: "Nunito Sans",
  }
});

Storybook configuration

• Inject MUI theme into Storybook (Docs ⇒ ⛔️ Add-on doesn’t work for MUI v5)

• Move theme to its own file under src/theme/index.js

• Need to add a new decorator into preview.js

// .storybook/preview.js 
import theme from "../src/theme";

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
];

Add theme stories

• Colors ( Docs )
• Snippet link

• Typography ( Docs )
• Snippet link

🎸  Injecting icons to our components

Icon Library [ Docs ]

🌟 Over 2K icons ready to use!

Installation

yarn add @mui/icons-material

Exercise ✍️

Enable ability to add icons in our Button component

✍️  Writing our first components

Avatar [ Docs ]

• Start here

Menu [ Docs ]

• Start here

Alert [ Docs ]

• Start here

💡 What is the `argTypes` control?

🎨  Writing custom styles to inject to our components

Supported styles [ Docs ]

❓ Is our `css` currently working in our components?

styled() and the sx prop

• https://mui.com/system/styled/

• Quick comparison styled-components vs MUI system — Link

☀️ Time to write custom styles

// src/components/ButtonStyles.js
export default {
  root: {
    px: 3,
    textTransform: "capitalize",
    letterSpacing: 1,
    fontWeight: "bold",
  },
};

➡️  Material Design Baseline Grid — Link

Exercise ✍️

Change the bgColor of our button using the secondary color using the `sx prop`.

⬇️  Download code [ Link ]