问题标签 [styled-components]

任何人都可以推荐最好的方式来撰写styled-component需要主题的s吗？

这是我的代码：https ://gist.github.com/aaronmcadam/7bfd63a6bc4cfc36f9947a449c6f494a 。

我有一个Avatar组成一个组件的Image组件，它本身就是一个styled-component.

如果我使用Avatar.styled.jswith <ThemeProvider>，可以成功覆盖主题。

如果我使用Avatar.withTheme.js，主题只能在我使用时被覆盖withTheme。

做这些事情的首选方式是什么？

我遇到了样式化组件的问题，我不确定这是否是技术限制，或者我如何使用它们的心理模型是错误的。

在这个例子中（我只是在 Codepen 中快速编写，所以忽略拼写错误）我有一个组件是跨度中的用户名。我希望能够在任何地方使用该组件，因此它的样式非常小：

我希望能够在不同的组件中使用这个跨度，但在这种情况下，我希望它的样式在这种情况下被覆盖：

据我所知，这是在第三方组件上设置样式的方法（并且可以在我的应用程序的其他地方使用），据我所知，它应该可以工作，但我什么也没得到。

另外，回到心智模型问题——当你使用样式化组件时，你应该这样做吗？

谢谢你的帮助！

我正在为一个新项目使用样式组件，并希望使用库的主题功能。我正在努力弄清楚是否存在向一个对象添加多个样式属性的良好或最佳实践方法（即，创建一种继承）。想要的是：

现在，对我来说很明显，您需要将主题属性传递给组件上的每个样式。有没有一种模式可以帮助减少上面示例中出现的一些重复代码？

我有以下组件，我在其中使用样式组件应用了 css：

从“样式组件”导入样式

我想将以下夹具与 react-cosmos 一起使用background-color，以根据道具调整组件的：

在 React 开发人员工具中，我注意到该组件PropsProxy有一个具有以下color属性的夹具道具：

如何确保正确传递道具react-cosmos？

我正在使用styled-components来构建我的组件。所有接受自定义值的样式属性都在我的组件中重用（应该如此）。考虑到这一点，我想使用某种全局变量，以便更新将传播到所有组件，而无需单独更新每个样式。

像这样的东西：

我想我的语法错了？另外，我知道在 Javascript 领域不建议使用全局变量，但在设计领域中，跨组件重用样式是绝对必须的。这里有什么取舍？

我最近改用styled-components进行样式设置，并且一直在尝试使 CSS 的 @supports 功能正常工作，但没有成功。

@supports 语法的使用有点像：

现在这很好，因为 styled-components 文档有以下行：

注意：＆符号（＆）被我们为该样式组件生成的唯一类名替换

但是当我尝试使用＆符号来使用它时，它不起作用。使用下面的代码时，我在输出的 CSS 中得到一个 & 符号

我对 React 和所有花哨的东西都很陌生。

在 google-react-map 上，有一些标记。他们每个人都有一个我想在悬停时缩放的图标。

我使用 styled-components 进行样式设置

有反应运动

这在开始时运行流畅且快速，但经过几次悬停后，动画变得越来越滞后。

我可能在这里错过了一些重要的东西

更改样式组件 webpack 后，如下所示；如何热重载样式组件？

[HMR] 以下模块无法热更新：（需要完全重新加载）这通常是因为已更改的模块（及其父模块）不知道如何自行热重新加载。

更新：我使用样式组件 1.1.2

使用 sytled-components 时是否可以使用属性选择器？

这个想法是，然后我有以下

否则我必须复制代码，它变得更加丑陋。

我的用例可能有点独特，但我正在使用包含在 flexbox 中的 DOM 元素创建一个动态大小的方形网格。每个 DOM 元素都有一个 SVG 图像背景和一个等于calc(100vmin / <gridSize>). SVG 元素很简单：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/> </svg>

但是，我注意到有些线条看起来比其他线条更暗，并且一些 SVG 线条之间存在间隙。（见下图）我假设这是由于像素舍入，因为当我调整浏览器大小时，间隙和厚度会跳来跳去。

calc我试图将像素styled-components从floor / ceil. 我还注意到让笔画宽度变粗可以缓解这个问题，但我更愿意让我的线条变细。

还有其他方法可以使线条保持一致吗？