CSS Class Names and Usage

Set a Component's class Name

<Button className="myNewButton">Click Me!</Button>

Stylesheet Examples

Due to the nested complex nature of many React components, we recommend using CSS selector * and child combinator >.

Select style on hover

div[class*=pipeline-select] > div:hover{  background-color: rgba(0, 255, 21, 0.514)!important;  border-color: #ff0800!important;}

button element style with class SolidButton and exclude Algo Buttons

button:not([class*=algo-btn-solid]):not([class*=AlgoSendButton]), button [class*=SolidButton] {  background-color: #1c1ce1!important;  color: #fff!important;  white-space: pre-wrap;  text-decoration: none;  margin-top: .5rem!important}

className Reference

We have also attached classes to each Pipeline-UI component for user convenience, and will be providing the reference sheet soon.

(coming soon)

Component	CSS Class
Component1	component-class