Sharing styles on internal components

[isaacalves]

I'm using Sass to style my components.

Is it possible to add classNames to inner elements like .Collapsible__contentOuter and Collapsible__contentOuter? I'd like these elements to share some styles with other components on my app, and it doesn't feel to be right to add react-collapsible selectors .Collapsible__contentOuter and Collapsible__contentOuter to other unrelated SCSS files.

For instance, in my project I have different panels, and some are collapsible and some are not. I have a file called _panel.scss that looks like this:

`.panel {
&:not(:first-child) {
margin-top: 40px;
}

.panel-heading,
.Collapsible__trigger {
	display: block;
	position: relative;
	padding-bottom: 10px;
	border-bottom: solid 2px $gray-light;
	margin-top: 0;
	margin-bottom: 0;
}

.panel-body,
.Collapsible__contentInner {
	padding-top: 16px;
}

}`

That works fine, but I think I'd rather remove the Collapsible styles from there and add the panel-heading classNames to the Collapsible__trigger element, for example, but in React world as far as I know I have no access to that markup.

Any ideas or recommendations?

[glennflanagan]

@isaacalves You can override the CSS class names using the relevant props. In the above case you would pass the class names into the triggerClassName and contentInnerClassName props.

e.g.

<Collapsible triggerClassName="panel-heading" contentInnerClassName="panel-body">
 ...
</Collapsible>