Feature Request: Allow multiple classNamePrefixes

Please refer issue 4230.

classNamePrefix="react-select" is not enough for everyday react select styles customization. react-select can be used in separate component with its own styles together with styles for parent component. Please add ability to use classNamePrefixes={["react-select", "react-select__for-component-x"]}.

Developers don’t want to use styled components of other inline styles solutions for political reasons. We have seen enough projects where styles was mixed with business logic inside single javascript file. We have spent a lot of time on refactoring unmaintainable code: inline styles always ends badly.

For now there is only one available workaround: use classNamePrefix="react-select__for-component-x" and .react-select__for-component-x { @extend .react-select }. But this solution is not acceptable from the following perspective:

const A = ({ className }) => (
  <div className={classNames("a", className)}
    <Select classNamePrefix="react-select__for-a" />
  </div>
);

.react-select {
  # common styles.
}

.react-select__for-a {
  @extend .react-select;
  # custom styles.
}

User of component A is able to customize <div class="a my-class-name"> by adding class name. But user is not able to customize <select>. Please imagine that we need to customize component A from component B:

const A = ({ className, selectClassNamePrefix }) => (
  <div className={classNames("a", className)}
    <Select classNamePrefix={selectClassNamePrefix || "react-select__for-a"} />
  </div>
);

const B = () => (
  <div className="b">
    <A className="a-inside-b" selectClassNamePrefix="react-select__for-a-inside-b" />
  </div>
);

.react-select {
  # common styles.
}

.react-select__for-a {
  @extend .react-select;
  # custom styles.
}

.react-select__for-a-inside-b {
  @extend .react-select__for-a;
  # custom styles.
}

We can see that developer of B component have to know implementation of component A to properly extend his class react-select__for-a-inside-b with react-select__for-a (internal class for component A).

And vice versa: developer of A component can’t rename react-select__for-a class name prefix without touching other components (like B).

Please review the following proposed solution:

const A = ({ className, selectClassNamePrefixes }) => (
  <div className={classNames("a", className)}
    <Select classNamePrefixes={["react-select", "react-select__for-a", ...selectClassNamePrefixes]} />
  </div>
);

const B = () => (
  <div className="b">
    <A className="a-inside-b" selectClassNamePrefixes={["react-select__for-a-inside-b"]} />
  </div>
);

.react-select {
  # common styles.
}

.react-select__for-a {
  # custom styles.
}

.react-select__for-a-inside-b {
  # custom styles.
}

Every developer implements its own component and know nothing about other components (except its interfaces).

If you will accept this solution, i can prepare a pull request, thank you.

[Rall3n]

In my opinion this does not need a change in the source code. You can easily achieve the same thing using a combination of classNamePrefix and className:

.prefixed__control {
    background: red;
}

.withClass .prefixed__control {
    background: blue;
}

<Select classNamePrefix="prefixed" />
<Select classNamePrefix="prefixed" className="withClass" />

CodeSandbox example

[ebonow]

Greetings @andrew-aladev from an everyday user who prefers stylesheets to styled components.

First of all, className as a react-select prop is defined pretty well in the documentation

className string Sets a className attribute on the outer component

Take this example from the Discussions Code Gallery: https://codesandbox.io/s/react-select-inline-83kdi?file=/example.js

It exemplifies a common use case of wanting to apply some modifier from the parent applied to the other custom components. In this case an inline react-select is given the className react-select react-select--inline and the classNamePrefix react-select. The menu can then be targeted as:

Base class .react-select .react-select__menu Modified class .react-select--inline .react-select__menu Extra specificity modified class .react-select.react-select--inline .react-select__menu

If you wanted more customization, className is provided as a prop on custom components so that you can specify a className for a particular custom component.

eg:

const Menu = props => <components.Menu className="a-in-b-custom-menu" {...props} />
const MySelect = props => <Select components={{ Menu }} {...props} />

.a-in-b-custom-menu { /* css stuff */ }

As a roadmap note, Jed has expressed interest in creating an api similar to styles but for component classNames to make it easier for those using UI libraries like Tailwind to style components exclusively using classNames.

Please lt me know if any of this helps, or please provide some example that is not satisfied by what @Rall3n or myself have responded with.