DDS Material React

The base HTML/CSS package for Digital Design System. A customised Material UI theme file with extra custom components. Also available in Bootstrap framework.

Getting started: With NPM

npm install @ddsys/material

Getting started: With Yarn

yarn add @ddsys/material

Getting started: With GitHub

Clone this GitHub repository to your project folder.

Using DDS Material React in your project

1. import @ddsys/material package and wrap your component with MuiThemeProvider
2. import Themes from "@ddsys/material";

<MuiThemeProvider theme={createMuiTheme(Themes[index])}>
    // add your components here. Like buttons and so on
    <YourComponent> </YourComponent>
</MuiThemeProvider>

3. In "YourComponent.js" import withStyles function

import { withStyles } from "@material-ui/core/styles";
// this theme contains BHP styles and colors
const styles = theme => {
 return {
   class_name_1: theme.styles.button.style,
   class_name_2: {...theme.styles.button.style, "you can override styles here"},
 };
};
function YourComponent(){
    const { classes } = props;
    // use class_name_1 in your component
    return <div className={ classes.class_name_1 }> </div>
}

//wrap and export Your Component
export default withStyles(styles)(YourComponent);

Read more about Material UI theme on the offical documentation here.

Please refer to the DDS online documentation on how to create and add component into your project.