Logo
Tango UI
0.9.9
Components
Tango Store
Tools
Update Log
MVP Verson: 0.9.9 beta
Lang Icon
Toggle Icon
Prop 'sx'
A new and faster way to express styles.

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

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

Samary：

  • sx="" is equivalent to className=""
  • sx={{}} is equivalent to style={{}}
  • When using class names, you need to add "!important"
  • When using Tailwind CSS, you need to add "!"

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>