运动网站模板,辽宁省品牌建设的建议,腾讯网站开发语言,邵阳相亲网站styletron官网#xff1a; styletron的GitHub链接#xff1a; styletron-react
一. 介绍
Styletron是一个通用的component-oriented#xff08;面向组件的#xff09;样式工具。它属于css-in-js类别。Styletron可以很好地与React配合使用#xff0c;但也可以与其他框架或…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;
}然后你就可以在代码中使用这个组件了
BlueBoxHello 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 size50px /以上代码会生成如下CSS:
._s1oczws6{width: 50px;height: 50px;
}总结
Styletron最常见的使用场景是与 React 结合使用这样可以更好地实现组件化开发。在代码中你可以直接使用 Styletron 提供的 styled 方法来定义样式并与 React 中的组件进行结合生成高效的组件样式。
Styletron 还提供了一个特点突出的功能css-in-js。在实际的开发过程中有时候我们需要对特有的组件加样式而当这些样式规则被放在全局中时会造成 CSS 的混乱。
Styletron提供了一种解决方案我们可以将需要添加的CSS代码放到js文件中然后通过CSS变量动态注入。这种方式不仅可以提高开发效率而且还能避免样式冲突。 styletron-engine-atomic样式标准引擎接口的原子实现。
