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：样式标准引擎接口的原子实现。
