dowjones / react-dropdown-tree-select

Lightweight, accessible, customizable and fast Dropdown Tree Select component for React

Home Page:https://dowjones.github.io/react-dropdown-tree-select/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add `classNamePrefix` prop to avoid class name collisions

mujadadrao opened this issue · comments

Is your feature request related to a problem? Please describe.
I'm always frustrated when the CSS classes from react-dropdown-tree-select conflict with existing styles in my application. Specifically, classes like .tag in the react-dropdown-tree-select/dist/styles.css file are overwriting my internal styles, causing visual inconsistencies and unexpected behavior.

Describe the solution you'd like
I would like to request the addition of a classNamePrefix prop to react-dropdown-tree-select, similar to what is available in the react-select package. This feature would allow users to specify a custom prefix for all CSS classes generated by the component. For example, setting classNamePrefix="rds" would result in classes like .rds-tag instead of .tag, thus preventing collisions with other styles in the application.

Describe alternatives you've considered
Currently, as a workaround, I have wrapped the DropdownTreeSelect component in a parent div with a custom class and copied the necessary styles from react-dropdown-tree-select/dist/styles.css into my local stylesheet, scoped under this custom class. While this solution works, it requires manual updates and maintenance, which is not ideal.

Additional context
Adding a classNamePrefix prop would greatly enhance the usability of react-dropdown-tree-select in larger applications where CSS class name collisions are more likely to occur. It would simplify the integration process and reduce the need for custom workarounds. Here is an example of how it could be implemented:

<DropdownTreeSelect
  classNamePrefix="rds"
  data={data}
  {...props}
/>

Thank you for considering this feature request. It would make react-dropdown-tree-select much more flexible and easier to integrate into diverse codebases without style conflicts.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.