问题标签 [styled-components]

我无法从文档中弄清楚这一点。

我正在尝试通过styled-components向我的服务器端渲染的 React 应用程序添加一些全局样式- 但我不知道如何做到这一点。

这是我的部分内容globalStyles.js：

这是我的通用渲染快递处理程序：

我在 React 项目中使用样式化组件。当组件在浏览器中呈现时，它们被分配一个随机生成的类名，例如：

<div class="sc-KSdffgy oPwefl">

这个类名不能帮助我识别来自哪个组件<div>，那么有没有办法轻松做到这一点？

Ps 目前我正在将 attrs 添加到我的样式化组件中，以便我可以在开发工具中识别它们，例如：

我已经搜索了 3 天来找出如何切换我的移动导航按钮来切换我的移动菜单。我是 React 新手，可以使用 jQuery 轻松完成此操作，但我不想使用 jQuery。我逐行复制了一个关于如何显示或隐藏元素的示例。我无法让它工作。任何帮助将非常感激。我正在使用带有 React 的样式组件。

按钮子组件：

菜单子组件：

具有所有状态的菜单容器组件：

我可以在 ReactDev 工具中看到一个复选框，显示 MenuContainer 具有状态，但是当单击按钮时它不会切换状态。

我正在使用styled-components我的组件的动态样式，但我似乎无法让它以我想要的方式工作。

我正在尝试在以ease-in-out编程方式和动态聚焦的按钮上添加效果。

如您所见，样式已应用，但该transition属性没有任何效果。有没有办法做到这一点？

就像信息说明一样，组件（按钮）每 3 秒重新渲染一次以进行切换，这可能是原因吗？如果是这样如何解决这个问题？

零件

图片

如您所见，Logout button(has class gBuhXv) has display: flex，而不是inline-block，因为 parent( ThemedApp, .jCe...) 的优先级更大

导致这种情况的规则p.column { text-align: right; }可以被覆盖body p.column { text-align: left; }，因为它更具体

它的正确行为，但不是我所期望的，如何使注销按钮的优先级更大？

我正在使用styled-componentsnpm 包并在组件上设置了一个事件，如下所示：

如何捕获密钥代码？

再生产

预期：palevioletredTitle 的颜色，TitleWithoutColor 的红色（主题样式触发）

得到：到处都是红色

为什么：导致这种情况的规则是：p.column { text-align: right; }可以被覆盖body p.column { text-align: left; }，导致它更具体

问题：如何编写主题以使组件的样式具有更大的优先级？

我目前正在构建我的第一个 React 应用程序的管理端，该应用程序是从create-react-app开始的（如果在这种情况下很重要，也可以使用 styled-components）。

我没有构建自己的自定义管理员，而是使用Semantic UI React。其中一部分涉及导入样式：

import 'semantic-ui-css/semantic.min.css';

我在我的管理容器组件中执行此操作。我遇到的问题是，一旦我导入这些样式，全局选择器就会在站点范围内应用，即使我只希望它们在管理方面。

是否有将导入样式限制在应用程序给定区域的标准做法？我对这个很陌生。

我已经尝试了用于 css-in-js 的 Glamorous 库，但无法解决一件事。

使用 vanilla css，您可以轻松地为类中的所有选择器添加样式，例如：

有什么办法可以用魅力四射来实现它？例如，在这个片段中，我正在寻找一种方法来声明容器内的所有 div 都应该具有margin-right20px 的大小，而无需将其传递给每个组件：

这是工作片段的链接： https ://stackblitz.com/edit/glemorouschildselector

例如，我如何addStyles在此代码段中实现该功能

谢谢