The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Question

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well!

I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example:

import { ButtonHTMLAttributes } from 'react';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  title: string;
  backgroundLowOpacity?: boolean;
};

export function Button({ title, backgroundLowOpacity, ...rest }: ButtonProps) {
  return (
    <button
      {...rest}
      type="button"
      className={`${backgroundLowOpacity && 'bg-gray-100'}`}
    >
      {title}
    </button>
  );
}

This is the component setup. Now, when I try to use className in the parent component, it doesn't work as expected.

<Button title="Sign up" className="bg-purple-500" />

Unfortunately, this doesn't apply the color purple to my button.

css reactjs typescript next.js tailwind-css

Answer 1

Answer №1

Essentially, in line 13 you are initializing a new className property, which will replace the existing className property from the spread operator ...rest. The correct method is as follows:

import { ButtonHTMLAttributes } from 'react';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  title: string;
  backgroundLowOpacity?: boolean;
};

export function Button({ title, backgroundLowOpacity, className, ...rest }: ButtonProps) {
  return (
    <button
      {...rest}
      type="button"
      className={`${className} ${backgroundLowOpacity && 'bg-gray-100'}`}
    >
      {title}
    </button>
  );
}

This way, any className you provide to your component will be included first, followed by checking if backgroundLowOpacity is also passed in before applying additional styling.

Answer 2

Essentially, in line 13 you are initializing a new className property, which will replace the existing className property from the spread operator ...rest. The correct method is as follows:

import { ButtonHTMLAttributes } from 'react';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  title: string;
  backgroundLowOpacity?: boolean;
};

export function Button({ title, backgroundLowOpacity, className, ...rest }: ButtonProps) {
  return (
    <button
      {...rest}
      type="button"
      className={`${className} ${backgroundLowOpacity && 'bg-gray-100'}`}
    >
      {title}
    </button>
  );
}

This way, any className you provide to your component will be included first, followed by checking if backgroundLowOpacity is also passed in before applying additional styling.

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Answer №1

Similar questions

Issue with Formik compatibility in Next JS 14 Application Structure

Leveraging databases during each deployment iteration

Using Typescript and Next.js to handle error messages returned from Axios responses

"Unearthing a skeleton within the client component while the server action unfolds in next

Rearrange elements within a div by clicking a button

Getting the content inside a div tag with selenium in python

Is there a way to adjust the positioning of an image within a <div> element?

Execute the unknown function parameter

Grid items in Material UI are not positioned next to each other

Tips for integrating tsconfig with webpack's provide plugin

Ensure that typescript examines the context of 'this' within unrestricted functions

Delay the occurrence of a hover effect until the previous effect has finished executing

Although server-side rendering is utilized with react-query, JSON data continues to be displayed in the network tab

React js: Caution - Ensure each child within a list is assigned a distinct "key" property

Infinite scrolling with a dynamic background

Creating XML templates in Angular 7: A comprehensive guide

The client's request experiences a 502 error after a duration of 2 minutes

Calculate the difference of two inputs using ReactJs for project balance

How can I design a Typescript interface that accommodates both strings and other data types?

How to switch a particular div (identified by its ID) in a React component