Go Main page
Go Main page

Web components

Foundations
Components
About
cover

utilities types

useStyles

v.1.0.0 | Saturn
Healthy
Github

Hook used when you want to generate new themes for your own components.

Following the Kubit philosophy, you can generate new components, extending existing ones, or using your own components.

Once a new component has been generated and its styles added to the ThemeProvider, you can access the styles assigned to a variant of this component using the useStyles hook.

Params

  • stylesName: Name of the style to be obtained.
  • variant: Variant of the style to be obtained.

Response

  • styles: Styles assigned to the component variant.

Usage example

123456789
import { useStyles } from '@kubit';
import { CustomStyledDiv } from './CustomStyledDiv';

const MY_COMPONENT_STYLES = 'MY_COMPONENT_STYLES';

const MyComponent = (props: {variant: string}) => {
  const styles = useStyles(MY_COMPONENT_STYLES, props.variant);
  return <CustomStyledDiv styles={styles}>My component</div>;
};
HooksuseScrollPosition
StatusVersion history