```
- #### With multiples sets of css variables
You may still use with or without injection. The example below shows multiples sets of css variables with injection.
```jsx
import React from 'react';
import { VariablesCSS } from '@menseb/react-css-variables';
const cssVariablesMargins = {
css: {
xsmall: 5,
small: 7.5,
medium: 10,
large: 12.5,
xlarge: 15,
},
prefixVariable: 'margin',
suffixValue: 'px',
};
const cssVariablesColors = {
css: {
red: 'f46060',
orange: 'ff8364',
yellow: 'ffb677',
green: 'acdeaa',
blue: '8ed6ff',
indigo: '6886c5',
violet: 'cca8e9',
},
prefixVariable: 'color',
prefixValue: '#',
};
export default function myComponent() {
return (
);
}
```
```html
```
## PropTypes
| property | type | required | default |
|----------|------|----------|---------|
| children | React Node or React Element | true | none |
| inject | Boolean | false | false |
| style | Object | false | {} |
| tag | String | false | div |
| variables | Variables Shape or Array of Variables Shape | true | none |
- #### Variables Shape
| property | type |
|-|-|
| css | Object of Boolean, Number or String |
| prefixValue | String |
| prefixVariable | String |
| separatorValue | String |
| separatorVariable | String |
| suffixValue | String |
| suffixVariable | String |
## Scripts
See [scripts](/package.json/) from the ```package.json``` file.
## Code of conduct
See [code of conduct](/CODE_OF_CONDUCT.md/) from the ```CODE_OF_CONDUCT.md``` file.
## License
See [license](/LICENSE.md/) from the ```LICENSE.md``` file.
