I've run into a puzzling issue where importing CSS styles in one React component is impacting the appearance of Ant Design's Select component in another component. Let me break down the scenario:
The setup involves two React components, namely Parent and MyCompThatHaveCss, organized as shown below:
// 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 bring in CSS styles using import './style.css';, while also utilizing Ant Design's Select component.
Nevertheless, I've observed that the styles from style.css are affecting the Select component within MyCompThatHaveCss, along with other Select components across the application - this is not what I intended.
Specified CSS styles:
/* 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 ensure that the CSS styles imported in MyCompThatHaveCss.tsx don't impact the styling of the Select component from Ant Design, restricting them to only apply to the specific component's styles?
I'm open to any insights or solutions to tackle this issue. Thank you!