styletron官網：
styletron的GitHub鏈接：
styletron-react
一. 介紹
Styletron是一個通用的component-oriented（面向組件的）樣式工具。它屬于css-in-js類別。Styletron可以很好地與React配合使用，但也可以與其他框架或普通JS一起使用。
二. 使用
2.1 靜態樣式
例如，下面的代碼定義了一個藍色的div：
import { styled } from "styletron-react";const BlueBox = styled("div", {background: "blue",color: "white",padding: "10px 50px",
})
這會生成一段類似于下面的 CSS 代碼：
._s12enoy73 {background: blue;color: white;padding: 10px 50px;
}
然后，你就可以在代碼中使用這個組件了：
<BlueBox>Hello World</BlueBox>
注意：class名稱是自動生成的，因此你不需要為CSS起名字發愁了，但是問題是css名稱都會自動變，如果你需要一個穩定的樣式，你需要添加data-test-id屬性。下面為官網截圖說明。
2.2 動態生成樣式:
Styletron還支持動態化定義樣式。例如，可以通過在樣式中使用函數，完成樣式的動態化設置。如下：
import { styled } from "styletron-react";const Box = styled("div", ({ size }) => ({width: size,height: size,
}));<Box size='50px' />
以上代碼會生成如下CSS:
._s1oczws6{width: 50px;height: 50px;
}
總結：
Styletron最常見的使用場景是與 React 結合使用，這樣可以更好地實現組件化開發。在代碼中，你可以直接使用 Styletron 提供的 styled 方法來定義樣式，并與 React 中的組件進行結合，生成高效的組件樣式。
Styletron 還提供了一個特點突出的功能：css-in-js。在實際的開發過程中，有時候我們需要對特有的組件加樣式，而當這些樣式規則被放在全局中時，會造成 CSS 的混亂。
Styletron提供了一種解決方案：我們可以將需要添加的CSS代碼放到js文件中，然后通過CSS變量動態注入。這種方式不僅可以提高開發效率，而且還能避免樣式沖突。
styletron-engine-atomic：樣式標準引擎接口的原子實現。
