Understand dash CSS class names (for instance Select-control)

Dash Python
1

Hi Dash community,

While trying to add some custom CSS stylesheets, in need to know which CSS classes correspond to which dash components. For instance, inspecting the HTML and CSS of one dash app, I end up seeing html snippet of the form
<div class="Select-control">
which seems to be the parent element of a dash core-component dropdown.

My questions are:

  1. Where does this CSS class “Select-control” comes from? (I imagine that it was automatically created through some react code)
  2. Where in the source code can I see where it was created, so that if I decide to customize this CSS class, I can avoid unwanted side effects (for the moment, the only occurence of “Select-control” I could find in the code was here: https://github.com/plotly/dash-core-components/blob/master/src/components/css/react-select%401.0.0-rc.3.min.css, but this is far from enlightening to me).
  3. Is there a place in the documentation/User guide which explains or mention this?

Two remarks to conclude:

  • I mention above “Select-control” just as an illustrative example, and would be happy to understand the whole CSS classes naming process.
  • I imagine that my question is the consequence of a lack of proper CSS, JS and/or React understanding, so sorry in advance.

Thanks in advance for your help,
Florent