Skip to main content

Styling and Theming

CSS Custom Properties​

For quick and easy theming, all components accept a cssVars prop. Assuming you have imported the css using one of the methods in the CSS section below, you can use cssVars to override any of the component's css variables. Here's an example:

// Note: for a proper example of Modal, see the docs.
// This just shows how to add css property overrides.

const cssVars = {
  lightModeBackgroundColor: '#dddddd',
  modalYPosition: '3rem', // default is vertically centered in the viewport
};

// keys should equal the css custom property name in camel case, minus the unl- prefix

<Modal isOpen={isOpen} cssVars={cssVars}>
  Welcome to our website!
</Modal>;

If you are using Typescript, Intellisense can give you the list of possible variables. Without TS, you find them by inspecting the parent element in browser dev tools.

CSS Modules and/or plain CSS theming​

By default, all components come with basic css styling in two formats: standard (BEM namespaced) and a CSS Module friendly version.

To use the standard version, import it like import @unleashit/[package-name]/dist/[component-name].css (see each component's readme for exact path). Alternatively you can copy it into your project if your build process doesn't support importing css.

Or if you are using CSS Modules, all of the UI components accept an optional cssModule prop where you can pass in either the provided or a custom CSS module. The provided version can be imported like import css from @unleashit/[package-name]/dist/[component-name].module.css (the *.module.css convention allows for automatic CSS Module support in most React frameworks).

Using the cssModule prop and your own modules, you can target any of the component's internal classnames as long as you name the styles correctly. To find the right names, check out the component's *.module.css (keeping in mind that sometimes not all possible targets are utilized) or the source code. Another option is to simply look at the markup in dev tools and translate the default BEM classnames like unl-[component-name]__[style-name-with-dashes] to [styleNameCamelCase] in your module.

You could also easily use the default styles as a base, then override only certain styles like:

import defaultCSS from '@unleashit/login/dist/login.module.css';
import overrides from './styles/login-overrides.module.css';

const cssModule = {
  ...defaultCSS,
  ...overrides,
};

const MyLogin = () => <Login handler={/* ... */} cssModule={cssModule} />;

Each component that uses CSS will output BEM class names by default. If a cssModule prop is passed in with matching classes, a hashed style class name will output for each match while non-provided class names will remain BEM.

Tailwind or CSS-in-JS​

If you are using either of these abominations in a web application you should repent. But if you insist on adding technical debt and spaghetti to your project, you should still be able to make use of the cssModule prop if your library works with classes (e.g. Aphrodite or Tailwind). In that case, the key would be the camel cased class to target and the value would be a standard className string.