A boilerplate for building a custom internal themed material-ui module for internal use following atomic design
import {ButtonComponent, TestComponent} from 'a-react-mg'
MATERIAL UI BUTTONS and STYLED-COMPONENTS PROPS:
<TestComponent theme="secondary" />
<ButtonComponent label='button' variants='primary'/>
<ButtonComponent label='secondary' />
<ButtonComponent label='large' size='large'/>
<ButtonComponent label='small' size='small'/>
MATERIAL UI PROPS and STYLED-COMPONENTS:
<ButtonComponent label='disabled' disabled variants='primary'/>
<ButtonComponent label='outlined'
variants='transparent'
variant= "outlined"
color='secondary'
/>
<ButtonComponent label='transparent' variants='transparent' color='primary'/>
<ButtonComponent label='elevation' label='Elevation' variant="contained"/>
// we can use the MATERIAL UI props in our components:
disabled
disableElevation
variant="outlined"
variant="contained"
color="primary"
color="secondary"
Colors and sizies examples using to build boilerplate
export const black = '#131111';
export const white = '#fff!important';
export const red = '#ca4b4b!important';
export const green = '#2d5f3e';
export const blue = '#9495ed!important';
export const Purple = '#9f91ad';
export const primary = 'rgb(20, 80, 170)!important';
export const secondary = '#ca374d!important';
export const almond = 'rgb(232,225,200)!important'
export const xsmall = 4;
export const small = 8;
export const med = 16;
export const large = 24;
export const xlarge = 32;
//import in TestComponent
import {xlarge,large} from '../../base/sizes'
import { black,primary, almond} from '../../base/colors'
const Div = styled.div<TestComponentProps>`
border: 2px solid ${black};
text-align: center;
width: 20%;
padding: ${large}px;
margin:${xlarge}px;
background-color:${primary}; //primary-color
${(props) => props.theme === 'secondary' &&
`background-color: ${almond};`} //secondary-color
`
// we can use the MATERIAL UI props in our components:
disabled
disableElevation
variant="contained"
variant="outlined"
color="primary"
color="secondary"