A thin layer of styling to make Material-UI look like the Chameleon design system!
npm i chameleon-mui
import { createMuiTheme } from '@material-ui/core/styles'
import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'
import { lightPalette, darkPalette, Chameleon, chameleon, typography, overrides } from 'chameleon-mui'
interface ExtendedThemeOptions extends ThemeOptions {
chameleon: Chameleon
}
const myCustomTheme: ExtendedThemeOptions = {
...createMuiTheme({
palette: lightPalette,
typography,
overrides,
}),
chameleon,
}
export { myCustomTheme }
// ThemeProvider.tsx
import React from 'react'
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'
export const ThemeProvider = ({ children }) => {
return <MuiThemeProvider theme={lightTheme}>{children}</MuiThemeProvider>
}
If you need to override certain things, it's super easy! Just extend the object using the spread operator.
Example: I want to override the h2
styling:
const myCustomTheme: ExtendedThemeOptions = {
...createMuiTheme({
[...]
typography: {
...typography,
h2: {
fontSize: 24,
fontWeight: 700,
},
}
[...]
})
}