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!

Answer 1

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!