新的CSS-IN-JS软件包-DEV365 开发者社区

使用一些本地CSS规则编写一些组件可能是有利的。您可以利用native CSS nesting来生成快速且非常轻巧的库：在一个标签中，您可以访问所有伪类。

我们制作了一个少于700B的包装来编写SOLIDJS的CSS-In-JS：https://github.com/ndrean/solid-css/tree/main。

此软件包使用document，因此不适合SSR。

它导出功能css，styled，createGlobalStyles和keyframes。

您编写模板CSS字符串并将其传递到css函数以产生class：

const bluediv = css`
  background-color: bisque;
  color: midnightblue;
`;

并使用它：

<div class={bluediv}>I am blue</div>;

您可以设计动画组件。 styled组件的一个示例：

const rescale = keyframes`
  0% {transform: scale(0.5)}
  100% {transform: scale(1)}
`;

const AnimSurf = (props) => styled("span", props)`
  font-size: ${props.size}em;
  animation: ${rescale} 2s ease infinite;
`;

并使用它：

<AnimSurf size={3}>🏄</AnimSurf>;

您可以将反应性样式与style Prop，覆盖类别的类型组件一起使用，根据道具创建有条件的CSS，并定义全局样式。检查读数和示例。