Note that this depends on the `gsc-material` package being stored in a public Git repository.
Note that this depends on the `gsc-material` package being stored in a public Git repository.
Then simply wrap your app's main component with the `<GSCMaterial>` component. For example, in the `index.js` file generated by `create-react-app`, use something like:
Then simply wrap your app's main component with the `<GSCMaterial>` component. For example, in the `index.js` file generated by `create-react-app`, use something like:
```js
```jsx
importReactfrom"react";
importReactfrom"react";
importReactDOMfrom"react-dom";
importReactDOMfrom"react-dom";
importGSCMaterialfrom"@gsc/material";
importGSCMaterialfrom"@gsc/material";
import"@gsc/material/ProximaNovaFontFace.css";
import"@gsc/material/ProximaNovaFontFace.css";
import"@gsc/material/ArialFontFace.css";// if required
importAppfrom"./App";
importAppfrom"./App";
ReactDOM.render(
ReactDOM.render(
...
@@ -29,6 +30,37 @@ ReactDOM.render(
...
@@ -29,6 +30,37 @@ ReactDOM.render(
);
);
```
```
### Theme Only
If you don't intend to use any of Material-UI's components and just want to use the styling solution (`@material-ui/styles`), you can do the following instead.
import"@gsc/material/ArialFontFace.css";// if required
importAppfrom"./App";
ReactDOM.render(
<MuiThemeProvidertheme={GSCTheme}>
<App/>
</MuiThemeProvider>,
document.getElementById("root")
);
```
This is essentially what the 'full' version of the package does behind the scenes, but it also implements Material-UI's `CssBaseline` component. If you are only using the theme as shown here, you may have to perform your own CSS reset or normalization.
Note that the font files themselves are not supposed to be distributed with the package. The design of this package is such that they will be obtained directly from `style.gsc.org.uk`.
Note that the font files themselves are not supposed to be distributed with the package. The design of this package is such that they will be obtained directly from `style.gsc.org.uk`.
A `font-face` declaration for Arial (`ArialFontFace.css`) is also included. This is usually unnecessary as it is a web-safe system font, but is sometimes required when designing for specific devices e.g. digital signage.
## Images
## Images
GSC logos are stored in the `img` directory for posterity. These are also not distributed with the package.
GSC logos are stored in the `img` directory for posterity. These are also not distributed with the package.