UnionStyleChoices.md

Ways to use union styles

CSS Classes with composes

This approach requires that you compose a union class and extend your own class with custom styles.

Example

CSS:

.myClass {
  composes: hero from '@xo-union/tk-ui-typography/lib/css/font-scale-categories';
  /* Custom styles */
  color: red;
}

JS:

import { myClass } from './styles.css';

const MyComponent = () => {
  return <div className={myClass}>Text</div>
}

export default MyComponent;

React Component

This approach requires that you just import a component for a standard element. You will still need to write your own class to extend the styles of the underlying element.

Example

CSS:

.myClass {
  color: red
}

JS:

import { Hero } from '@xo-union/tk-ui-typography';
import { myClass } from './styles.css';

const MyComponent = () => {
  return <Hero className={myClass}>Text</Hero>
}

export default MyComponent;