@ddsys/material/README.md

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

<p>
    <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a>
    ·
    <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a>
  </p>

# 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](https://gitlab.com/bhp-dev/dds-bootstrap-theme) 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](https://gitlab.com/bhp-dev/dds-material-react) 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](https://material-ui.com/customization/themes/).

Please refer to the DDS [online documentation](https://bhp-dev.gitlab.io/dds-digital-design-system/) on how to create and add component into your project.