Add `classNamePrefix` prop to avoid class name collisions
mujadadrao opened this issue · 1 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.