Question

我正在尝试使用样式化的组件（共享选择器）实现类似以下输出的结果。

.styleOne, .styleTwo {
    color: blue; /* shared */
}

.styleOne {
    font-size: 10px;
}

.styleTwo {
    font-size: 20px;
}

我尝试过：

1-（这很有意义，为什么它没有呈现我想要的输出）

const shared = `color: blue;`

const StyleOne = styled.div`
    font-size: 10px;
    ${shared}
`

const StyleTwo = styled.div`
    font-size: 20px;
    ${shared}
`

2-

const Shared = styled.div`
    color: blue;
`

const StyleOne = styled(Shared)`
    font-size: 10px;
`

const StyleTwo = styled(Shared)`
    font-size: 20px;
`

3-

const shared = css`
    color: blue;
`

const StyleOne = styled.div`
    font-size: 10px;
    ${shared}
`

const StyleTwo = styled.div`
    font-size: 20px;
    ${shared}
`

以上所有结果均类似于以下内容：

.styleOne {
    color: blue; /* duplicated */
    font-size: 10px;
}

.styleTwo {
    color: blue; /* duplicated */
    font-size: 20px;
}

从代码的角度来看，从技术上讲，每种方法都共享样式。但是，规则仍然重复。我希望自己能够共享CSS规则。

在SASS中有一个类比-我想使用占位符而不是mixin。

要添加一些有关为什么要实现此目的的上下文，出于性能考虑，我希望有一个较小的HTML文档。我想象在一个共享很多样式的大型应用程序中，样式块可能会变得很大。

Answer 1

大型应用 一词含糊不清，无法说明您是否会遇到性能问题-无论是下载/执行JS还是下载解析CSS和/或获取其他媒体（字体，图像等）。也就是说，样式化组件会在运行时在_context.Ignicoes.Include(i => i.ListaOccurrencias).FirstOrDefault(ignicaoId => ignicaoId.Id.Equals(id));中应用样式，并且在将样式推迟到DOM中需要它们时做得很好。

看看这个example并遵循以下步骤：

检查DOM，然后在head标签中展开Elements
寻找这个head标签并将其展开：style
在检查器仍处于打开状态的情况下，导航到其他页面并注意如何动态生成类名
一旦分配了类，便可以重用

这与使用css-modules（作用域类）具有类似的效果，而无需额外的请求来下载所需的CSS，并且它会自动为CSS属性添加前缀，而无需任何其他插件。

所以问题就变成：拥有更多的Javascript（在运行时打包和运行样式化组件），更少的CSS（每页下载CSS的请求更少）还是更多的CSS和可能更少的Javascript？您需要在生产中运行指标（例如lighthouse test），以确定哪个性能更高；否则，这只会是一种猜测/个人观点。

无论哪种方式，无论是下载/解析CSS还是下载/执行JS，您都将遇到某种渲染阻止。

如何使用样式化的组件创建共享样式？

1 个答案: