How to find the default css class name of React components?-CodePudding

I'm trying to add style to a ProSidebar. Here is the code snippet:

<ProSidebar className="MySidebar">
  <SidebarHeader className="MySidebarHeader">
    ...
  </SidebarHeader>
</ProSidebar>

And the css:

.MySidebar {
  position: fixed;
  width: 300px;
}    
.MySidebarHeader{
  font-size: 20px;
}

But later I found examples which has the class names like:

.pro-sidebar {
  width: 100%;
  min-width: 100%;
}
.pro-sidebar-inner {
  background-color: white;
  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
}

These seem to be the default class names for ProSidebar. Where can I find these default names? Do other components have such default css classes? Is there any documentation on that?

CodePudding user response：

Regarding where this information is, there is a partial file in the scss folder like _sidebar.scss that is establishing the .pro-sidebar width for example. You would need to go to the variables.scss file to substitute in your own variables, OR, just remove the style from the partials that you want to have control of all together.

That said, adding the !important flag, changing your classnames to the one's ProSidebar is using, or removing the !default flag from whatever variables in the variables.scss file you don't want to show up might work just as well.

CodePudding user response：

You can find the class names in developer console. In developer console -> Elements Tab if you expand elements you can find class names. Yes other elements can have default class names. Try adding !important to css styles to overwrite styles for the default class names or new class names.