Testing locally
-
in this file
-
npm i
install dependencies -
npm run build
ornpm run tsc
to build your module
-
-
in childApp
-
in package.json under dependencies add ui-astra-assets with file:(relativePathToRepo)
- "ui-astra-assets": "file:../ui-astra-assets",
-
npm i
to make sure everything is set up -
start app
npm start
-
AstraTheme AstraColors
AstraTheme should be used with MuiThemeProvider or when you need specific Material Theme styling
AstraColors can be used for Astra's Branding colors.
Note AstraColor.blue & AstraColor.green are the same as AstraTheme.primary & AstraTheme.secondary
import * as React from 'react';
import { AstraTheme } from 'ui-astra-assets';
import { MuiThemeProvider } from '@material-ui/core/styles';
import App from 'containers/App';
export default (props) => {
return (
...
<MuiThemeProvider theme={AstraTheme}>
...
<App />
...
</MuiThemeProvider>
...
);
};
import * as React from 'react';
import { AstraColors, AstraThemes } from 'ui-astra-assets';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
const UglyButton = withStyles(theme => ({
root: {
backgroundColor: theme.palette.error.dark,
color: theme.palette.primary.dark,
},
}))(Button);
export default (props) => {
return (
// warning very ugly
<UglyButton
variant={'contained'}
>
Attention!
</Button>
);
};
import * as React from 'react';
import { AstraColors, AstraThemes } from 'ui-astra-assets';
import Button from '@material-ui/core/Button';
export default (props) => {
return (
// warning very ugly
<Button
style={{
backgroundColor: AstraColors.orange.dark,
// if you are using AstraTheme to set colors
// it may be better to use the above example
color: AstraTheme.palette.primary.light,
}}
variant={'contained'}
>
Attention!
</Button>
);
};