Tango UI

Prop 'sx'

A new and faster way to express styles.

In most Tango UI components, there are multiple ways to define styles:

Tailwind CSS： The recommended unified style management method is supported by most components.
'sx' prop： Tango UI's built-in style expression is an enhancement of style.
Inline style： Write directly on the component style={{}}.
CSS class： Use className to specify the class name and use it with a .css file to express the style.
Components props： Use the methods provided by the component itself to directly customize the style.

Samary：

Reason: the component manages built-in styles based on CSS Module, and the weight of className is lower than the built-in styles.

Demo

We use different methods to declare the same style for the button: setting the background color, text color, padding and rounded corners

1. Tailwind CSS

<Button className="bg-blue-500 text-white px-4 py-2 rounded">
  Submit
</Button>

2. 'sx' prop

<Button sx={{ bg: "blue", c: "white", px: 4, py: 2, br: 6 }}>
  Submit
</Button>

<Button sx="!bg-blue-500 !text-white !px-4 !py-2 !rounded">
  Submit
</Button>

<Button sx="my-button-sx">Submit</Button>

.my-button-sx {
  background-color: blue !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
}

3. Inline style

<Button style={{ backgroundColor: "blue", color: "white", padding: "8px 16px", borderRadius: "6px" }}>
  Submit
</Button>

4. CSS class

<Button className="my-button">Submit</Button>

.my-button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

5. Components props

<Button type="primary" size="large">
  Submit
</Button>