Custom Styles

If you need to customize the style of a component the resolve tag from styled-jsx/css can be used: styled-jsx docs

The nested components is styled from the parent.

Example: Custom styled Button

import css from "styled-jsx/css";
import { Button } from "pier-ui";
const customButton = () => {
  const { className, styles } = css.resolve`
    .custom-style.button.primary {
      background-color: rgb(139, 40, 219);
      border-color: rgb(139, 40, 219);
    }
    .custom-style.button.primary:hover {
      background-color: rgb(115, 33, 183);
      border-color: rgb(115, 33, 183);
    }
  `;
  return (
    <>
      <Button variant="primary" className={`custom-style ${className}`}>
        Primary Custom Styles
        {styles}
      </Button>
    </>
  );
};
export default customButton;

It is recommanded to add a custom class name before you overwrite the the classes of the component. The css classes form the component are visible in the rendered component.

Documentation

Custom Styles

Example: Custom styled Button