0.6.2 • Published 1 month ago
@equinor/fusion-react-styles v0.6.2
@equinor/fusion-react-styles
Install
npm install @equinor/fusion-react-styles
Basic
import { makeStyles, createStyles, clsx, theme } from '@equinor/fusion-react-styles';
type StyleProps = {
color: string;
background: keyof typeof theme.colors.ui;
};
const defaultStyleProps: StyleProps = {
background: 'background__default',
color: 'white'
}
const useStyles = makeStyles((theme) =>
createStyles({
// style rule
foo: ({ background }: StyleProps) => ({
// theme style
...theme.typography.paragraph.ingress.style,
// theme value
backgroundColor: theme.colors.ui[background].getAttribute('color'),
}),
bar: {
// CSS property
color: (props: StyleProps) => props.color,
},
}),
// name the stylesheet for easy debugging
{ name: 'my-component' }
);
const MyComponent = (props: StyleProps) => {
// Pass the props as the first argument of useStyles()
const classes = useStyles({ ...defaultStyleProps, ...props });
// Combine classes
const className = clsx(classes.foo, classes.bar);
return <div className={className} />;
};
const App = () => {
return (
<div>
<MyComponent color="red" background="background__danger"/>
<MyComponent color="blue"/>
</div>
);
};
Specificity
In some cases one need higher specificity to override class from imported component. This is achieved by increasing the specificity.
const styles = makeStyles(createStyles({
root: {
'& $disabled': {
color: 'white',
},
},
disabled: {},
}));
const MyComponent = (props: StyleProps) => {
const [disabled, setDisabled] = useState(false);
const classes = useStyles();
const className = clsx(classes.root, disabled && classes.disabled);
return <div className={className} />;
};
Provider
🏗 WIP - there will be better way to provide custom theme object
When developing for Fusion, this is not necessary, since provider is injected into the portal framework
import {ThemeProvider} from '@equinor/fusion-react-styles';
const mount = (
<ThemeProvider seed="my-app">
<MyApp />
</ThemeProvider>
);
ReactDOM.render(mount, document.getElementById('root'));
0.6.2
1 month ago
0.5.10
7 months ago
0.5.11
7 months ago
0.5.8
9 months ago
0.5.7
10 months ago
0.5.9
9 months ago
0.6.1
5 months ago
0.6.0
7 months ago
0.5.6
11 months ago
0.5.5
2 years ago
0.5.4
2 years ago
0.5.3-248.0
2 years ago
0.5.3
2 years ago
0.5.0
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.4.0
2 years ago
0.4.3
2 years ago
0.3.6
2 years ago
0.3.7
2 years ago
0.3.5
3 years ago
0.3.4
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.1.0-table.0
3 years ago
0.1.0-alpha.2
3 years ago
0.1.0-alpha.1
3 years ago
0.1.0-alpha.0
3 years ago