Question 337352 in CSS Question posted in
Some basic documentation can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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!


  2. 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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search