open-index/open-npm huggingface dataset:
npm package: @react.material/drawer
Description: The React Material Components for the web drawer component
Latest version: 0.2.2

```  
    <header class="mdc-persistent-drawer__header">
      <div class="mdc-persistent-drawer__header-content">
        Header here
      </div>
    </header>
    
    
    <nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
      <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
      </a>
    </nav> 

```
npm package: @react.material/theme
Description: The React Material Components for the web theme component
Latest version: 0.2.3

# Theme

## Installation

- ```yarn add @react.material/theme```

- ```npm install --save @react.material/theme```



### set your theme color (note: sass is not supported for now)

```
//index.js
import '@react.material/theme';
```

```
/*index.css*/

:root {
    --mdc-theme-primary: #9c27b0;
    --mdc-theme-primary-light: #000;
    --mdc-theme-primary-dark: #000;
    --mdc-theme-secondary: #000;
    --mdc-theme-secondary-light: #000;
    --mdc-theme-secondary-dark: #000;
    --mdc-theme-background: #000;
}

/*Checkbox ripple*/
.mdc-checkbox.theme::before, .mdc-checkbox.theme::after {
    background-color: rgba(158, 158, 158, 0.14);
}
```


you may refer [**here**](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#css-custom-properties) for more info