Writing CSS in React has always been a headache for me. I’ve tried the following.

  • SCSS global styles, relying on naming to avoid style conflicts. It’s cheap to learn and fun to write, but organizing class names can be tricky. Bootstrap SCSS is the best learning resource in my opinion

  • CSS module Writes normal CSS files that are used in React with the class name. It’s not very intuitive. It’s tedious to write.

  • Styled – Component, the most used CSS-in-JS solution seen in the course, is powerful. One problem is that I often need to write Wrap, Container and other meaningless components.

  • Emotion can organize code like style-component. My favorite point is that you can write CSS inline as you would inline CSS, regardless of naming. Babel generates classnames. You can also write styles using CSSObject, making it easier to organize styles through JS.

Recently, I learned to write the React component library. Emotion is suitable for component scenarios, and I intend to learn how to use it in depth. In Epic-React Kent also uses emotion and prefers CSSObject. I’m mainly referring here to the way he organizes CSS code.

In React, switching styles between props is a common scenario. Here’s an example of a Button component:

import styled, { CSSObject } from "@emotion/styled";
import * as colors from ".. /styles/colors"; Export const blue = '#0d6efd';
import { DISABLED_OPACITY } from ".. /styles";
import { ButtonProps } from "./Button";

export interface ButtonProps extendsReact.ComponentPropsWithoutRef<"button"> { size? :"small" | "medium" | "large"; variant? :"primary" | "secondary" | "danger"; isFullWidth? :boolean;
}

// Here we define the basic style of the button
const base: CSSObject = {
  cursor: "pointer".display: "inline-block".fontWeight: "normal".textAlign: "center".verticalAlign: "middle".userSelect: "none".border: "1px solid transparent".padding: ".4rem .75rem".fontSize: "1rem".lineHeight: 1.5.borderRadius: "4px".transition: "all .15s ease-in-out"."&:focus": {
    outline: "0",},"&:disabled": {
    cursor: "inherit".opacity: DISABLED_OPACITY,
  },
};

// We can have a CSSObject style depending on the props values
type EnumStyles = Record<string, CSSObject>;

const buttonVariant: EnumStyles = {
  primary: {
    color: colors.white,
    backgroundColor: colors.primary,
  },
  secondary: {
    color: colors.white,
    backgroundColor: colors.secondary,
  },
  danger: {
    color: colors.white,
    backgroundColor: colors.danger,
  },
};

const buttonSize: EnumStyles = {
  small: {
    fontSize: ".75rem".padding: ".2rem .75rem",},medium: {
    fontSize: "1rem".padding: ".4rem 1rem",},large: {
    fontSize: "1.25 rem." ".padding: ". 6 rem 1.25 rem. "",}};// The function accepts props and returns a different CSSObject depending on the value of the props
const color = ({ variant = "primary" }: ButtonProps) = > buttonVariant[variant];

const size = ({ size = "medium" }: ButtonProps) = > buttonSize[size];

const fullWidth = ({ isFullWidth = false }: ButtonProps) = >
  isFullWidth
    ? {
        display: "block".width: "100%",} :null;

// Emotion can accept arrays, objects, and functions.
export const StyledButton = styled.button<ButtonProps>(
  base,
  color,
  size,
  fullWidth
);
Copy the code

In reference to several blogs and the coding habits of big names, I have summarized the most clear and easy to maintain CSS solutions.

My emotion and TS are as good as when I just got on the bus. I will practice while reading the documents. If there is any mistake, please correct it.

As far as TS is concerned, I can say that it greatly reduces my development experience. Sometimes reporting errors can not start, to solve a problem to spend a long time, it is a blow to confidence, nested model scalp pins. But keep using it, and you may be able to enjoy Type-Safe after this painful period.

Want to get a job at React + TS! Can blogging help? This is my rough room

github