Imported CSS in one React component affecting Ant Design Select in another component

Question

I'm encountering an unexpected issue where importing CSS styles in one React component seems to affect the styling of Ant Design's Select component in another component. Here's a simplified overview of the scenario:

I have two React components, Parent and MyCompThatHaveCss, structured as follows:

// Parent.tsx
import Child from "./Child";
import MyCompThatHaveCss from "./MyCompThatHaveCss";

export default function Parent() {
  return (
    <div>
      <Child />
      <MyCompThatHaveCss />
    </div>
  );
}

// MyCompThatHaveCss.tsx
import './style.css';
import { Select } from 'antd';

export default function MyCompThatHaveCss() {
  return (
    <div>
      <p>Component with CSS styles</p>
      <Select options={[{ value: 'Option 1', label: Option 1 }]} />
    </div>
  );
}

In MyCompThatHaveCss.tsx, I import CSS styles using import './style.css';, and I also use Ant Design's Select component.

However, I noticed that the styles from style.css are also affecting the Select component inside MyCompThatHaveCss, as well as other Select components in the application, which is unintended behavior.

CSS styles added:

/* Make dropdown content width by content in it*/
.ant-select-dropdown {
  width: max-content !important;
}

/* For make text not off screen when text too long */
.ant-select-item-option-content {
  white-space: pre-wrap !important;
}

How can I prevent the CSS styles imported in MyCompThatHaveCss.tsx from affecting the styling of the Select component from Ant Design, and ensure that it only applies to the specific component's styles?

I appreciate any insights or solutions to resolve this issue. Thank you!

All CSS files are compiled to a single CSS file in the client. You have to keep this in mind. Therefore you should keep the classNames unique — Martin Wangen-Eriksen
– Martin Wangen-Eriksen, Commented Feb 9, 2024 at 9:13
I've been exploring CSS modules to better understand how they work. However, I'm a bit confused. Does CSS modules only apply to elements that are directly written in the code? It seems like it can't override the CSS used by libraries in my components — Dewvie
– Dewvie, Commented Feb 9, 2024 at 9:31

Juzar Antri · Accepted Answer · 2024-02-09 09:19:45Z

0

Its because you are changing the css of the antd select component and you are not exactly specifying the exact location of the antd select.

What I mean is try this way by giving classes to the parent of antd select and then apply the css:

// MyCompThatHaveCss.tsx
import './style.css';
import { Select } from 'antd';

export default function MyCompThatHaveCss() {
  return (
    <div className="container">
      <p className="para">Component with CSS styles</p>
      <Select options={[{ value: 'Option 1', label: Option 1 }]} />
    </div>
  );
}

Then apply the css like:

/* Make dropdown content width by content in it*/
.container .ant-select-dropdown {
  width: max-content !important;
}

/* For make text not off screen when text too long */
.container .ant-select-item-option-content {
  white-space: pre-wrap !important;
}

I hope this will resolve your issue :)

answered Feb 9, 2024 at 9:19

Juzar Antri

1287 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dewvie Over a year ago

Seem not work. This is my code tsx: pastebin.com/1n5CgxVL style.css: pastebin.com/3RCXbZQa This not apply any option in my code

Dewvie · Accepted Answer · 2024-02-09 09:53:45Z

0

Found solution but not work like replace css style but work for now

just add this to Select of antd

<Select
  dropdownStyle={
    { 
      width: "fit-content", 
      whiteSpace: "pre-wrap" 
    }
  }
/>

While this solution does resolve the width problem in most cases, it falls short when the screen size is reduced. In such cases, it defaults to a max-content width instead of the desired fit-content.

Any solution that make this complete I'd greatly appreciate it. Thank you!

answered Feb 9, 2024 at 9:53

Dewvie

776 bronze badges

Collectives™ on Stack Overflow

Imported CSS in one React component affecting Ant Design Select in another component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related