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