Styling with CSS-in-JS
Now that we have a flexible API to control our Button component, let's add the relevant styling from our demo application. We will be using styled-components as our CSS-in-JS solution and including custom props for controlling each style.
Prop definitions#
Using the demo application we can identify four unique style combinations. These styles can be represented with the following props:
| Prop | Values | Default value |
| ------------- | ----------------------------------------- | ------------------------- |
| `variant` | `"secondary"`, `"primary"`, or `"danger"` | `"secondary"` |
| `size` | `"small"`, `"medium"`, or `"large"` | `"medium"` |
| `isFullWidth` | `true` or `false` | `false` |
| `disabled` | `true` or `false` | inherited from `<button>` |
With these values we are able to create a custom prop interface for our Button component. Note that disabled is a native property already provided by HTMLButtonElement so we don't have to explicitly define it.
// File: src/buttons/Button.tsxexport interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
variant?: "secondary" | "primary" | "danger";
size?: "small" | "medium" | "large";
isFullWidth?: boolean;
}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ children, variant, size, isFullWidth, props }, ref) => { return (<button ref={ref} type="button" {props}>
{children}</button>
);
});
Button.defaultProps = {
variant: "secondary",
size: "medium",
isFullWidth: false,
};
styled-components#
Similar to react and react-dom, styled-components requires us to mark it as a peer dependency. We will also be including polished; a library that allows us to perform style calculations at runtime.
# Install styled-components dependenciesnpm install --save-peer styled-components
npm install --save-dev @types/styled-components
# Install polished for style calculationsnpm install polished
Global variables#
Even though we are writing our styles with CSS-in-JS, many of the best practices from traditional CSS and pre-processors still apply. Our demo application provides color constants from the _variables.scss file for use throughout its components. Let's migrate those SASS variables to TypeScript for use in our components.
Create a new file at src/utils/styles.ts.
mkdir src/utils
// File: src/utils/styles.tsexport const SECONDARY_COLOR = "#ced4da";
export const SECONDARY_TEXT_COLOR = "#000";
export const PRIMARY_COLOR = "#0a58ca";
export const PRIMARY_TEXT_COLOR = "#fff";
export const DANGER_COLOR = "#dc3545";
export const DANGER_TEXT_COLOR = "#fff";
export const DISABLED_OPACITY = 0.65;
Initial styling#
Create a new styles.ts file alongside Button.tsx. This file will include all of the styling logic for the component.
If we look at the .company-button styles from the demo application we can identify some initial styles that are provided regardless of the different style variants. Let's create a new styled component that includes these styles.
This page is a preview of The newline Guide to Building a Company Component Library
