Incorporate props within the CSS template string of Emotion for enhanced styling flexibility

Question

Incorporate props within the CSS template string of Emotion for enhanced styling flexibility

I am currently in the process of transitioning my design system from styled-components to emotion.

Within styled-components, the following syntax is considered valid:

export interface AvatarProps {
  // ...
  shape: AvatarShape;
  size: AvatarSize;
}

const borderRadiusByShape = css<Pick<AvatarProps, "shape" | "size">>`
  border-radius: ${(props) => {
    return match(props.shape)
      .with("circle", () => `${props.size}px`)
      .with("square", () => "0px")
      ...
      .exhaustive();
  }}
`;

const StyledAvatar = styled.div<AvatarProps>`
  /* ... */
  ${borderRadiusByShape};
`;

This approach allows for the reuse of borderRadius in various styled.[x] declarations.

Upon reviewing emotion's css function, it appears that emotion does not support this syntax. Is there a workaround that would eliminate the need to encapsulate this functionality within a new component?

css reactjs styled-components emotion

Answer 1

Answer №1

After some investigation, I discovered that I can extract the properties from the css and create a function to process these properties and generate the corresponding CSS:

export interface AvatarProps {
  // ...
  shape: AvatarShape;
  size: AvatarSize;
}

const calculateBorderRadius = (props: Pick<AvatarProps, "shape" | "size">) => css`
  border-radius: ${match(props.shape)
    .with("circle", () => `${props.size}px`)
    .with("square", () => "0px")
    /* ... */
    .exhaustive()};
`;

const StyledAvatar = styled.div<AvatarProps>`
  /* ... */
  ${calculateBorderRadius};
`;

Answer 2

After some investigation, I discovered that I can extract the properties from the css and create a function to process these properties and generate the corresponding CSS:

export interface AvatarProps {
  // ...
  shape: AvatarShape;
  size: AvatarSize;
}

const calculateBorderRadius = (props: Pick<AvatarProps, "shape" | "size">) => css`
  border-radius: ${match(props.shape)
    .with("circle", () => `${props.size}px`)
    .with("square", () => "0px")
    /* ... */
    .exhaustive()};
`;

const StyledAvatar = styled.div<AvatarProps>`
  /* ... */
  ${calculateBorderRadius};
`;

Incorporate props within the CSS template string of Emotion for enhanced styling flexibility

Answer №1

Similar questions

Aligning an SVG within a container div

Assistance needed with dynamically resizing a background image

Is there a way to detect when the mobile keyboard is open in a React application?

React component properties fail to update

Retrieving information from a TableRow element within Material UI

How to Disable Autofill Background Color in React Material UI

The Angular Material table does not adapt to different screen sizes

Use JavaScript to load and set a background image for a div

Using jQuery to toggle sliding the information above a div

The element fails to appear on screen when using Firefox

Utilize a combination of filters within a Redux action

Conceal a Column in Material UI Data Grid Filter

The integration of ag-grid webpack css is not reflecting on the website as intended

Navigating through pages in a server component using Next.js

What is the best way to replicate a div's background color using an image within the body element?

The Express server is failing to establish a connection with Node.js due to an error in the

Space between an image and a div element

Achieving automatic div width using CSS

Guide user to different screen in React Navigation depending on context state

Restrict HTML Elements Based on Their Size