问题标签 [radium]

我正在开发一个关于 reactJS 的网站。我使用镭和反应路由器作为路由。我的路线有很多问题...

在我的主页上有一个固定的导航栏菜单，其中包含指向文档页面的链接。

在此文档页面上，我也有此栏，但要访问其他链接，我必须单击 2 次才能到达那里。

这是文档路线：

和文档：

它是使用反应路由器的正确方法吗？一键重定向怎么办？在第一次点击时，网址会正确更改，但页面不会更改。

谢谢，

由于以下错误，我的应用程序无法编译：

我的应用程序分为 App.js 和 AppContent.js。我认为这可能是一种在 StyleRoot 中包装我的应用程序的可行方法。

应用程序.js

应用内容.js

这是我第一次使用 Radium，我不明白为什么第 12 行被视为错误。

我需要为特定选择器动态更改反应组件中的颜色。在 scss（使用 sass）中，我有以下规则：

我想在反应代码中将其更改为黄色、红色或其他。

我不能style为元素使用属性，因为我需要选择器来申请所有子孩子！=）

有什么本土方法吗？或者我应该使用镭？或者有没有类似的库？也许 css-next some hove 可以帮助解决这个问题？

我有颜色选择器，我不能为每种颜色编写类样式=(

对于一些回答者注意：

所以我在一些 scss 文件中有选择器，在一些根 js 文件中导入，.class * {color: $somecolor}我需要在颜色选择器中选择颜色期间更改该选择器中的 $somecolor

也许我可以以某种方式为所有嵌套的内部style属性设置选择器？或者有一种方法如何递归地为style道具中的每个嵌套项目应用 css 样式？

我写了一个 React 组件Button：

我还Button用 Jest 和 Enzyme 编写了一个测试，它验证它的dark样式是否在其darkprop 设置为时应用true：

如您所见，我通过检查 的属性styles.dark是否在 renderButton的属性中来做到这一点style。如果是，则表示样式已成功应用。

问题是，styles.dark不componentStyles匹配：

的输出console.log(styles.dark)

的输出console.log(componentStyles)

我注意到这里有几个问题：

• styles.dark图书馆有几个Color() [Object]s 。color它们没有将它们的rgb()值作为字符串输出，但具有相同的属性componentStyles，因此导致不匹配。
• componentStyles剥离了 Radium 的交互样式，例如:focus和:hover（我假设 Radium 在由 Enzyme 的shallow()函数触发的渲染期间执行此操作）。这会导致与 不匹配styles.dark，而不会剥离这些属性。

结果，我不确定如何测试它。我想不出任何替代解决方案来验证styles.dark已应用。我认为styles.dark在测试期间执行以下操作将是一个解决方案：

• 递归地使所有Color() [Object]s 进行处理，以便将它们的rgb()值作为字符串输出。
• 递归删除所有交互式 Radium 样式（如:focus和:hover）

这样做会导致styles.dark等于 的值componentStyles，从而通过测试。我只是不知道该怎么做。

我正在使用 Radium 在一个简单的 React 应用程序中内联我的样式，但不知怎的，Radium 一个接一个地编译供应商前缀：

这一切似乎都适用于不需要供应商前缀的属性（如 maxWidth 或 margin），但宽度被编译为：

当然，浏览器会抱怨这是一个无效值。display: flex例如，与 相同。

任何想法？

我一直在网上搜索解决此问题的方法，但找不到任何相关信息。希望这里有人知道）在说什么。

问题在于 IE 11 和 FireFox 56

• 我使用ReactJs来查看。
• 我使用RadiumJs进行内联样式。

现在我有一个文本段落，一个很长的单词不会中断 - 我正在使用word-break: break-word.

我知道如果我添加它可以工作 -ms-word-break: break-word，但我找不到如何使用 Radium 添加它。

使用 RadiumJS 时如何在 IE 和 FF 中打断长词？

提前致谢！

我正在研究一个名为 React 的组件ProjectCard，它包含两个 div。第二个 div 有一个下拉菜单，当用户将鼠标悬停在卡片上或单击下拉菜单时，我想突出显示整张卡片。我使用 Radium 为以前的组件添加悬停功能，但为了合并这个新的高亮逻辑，我跟踪isActive并isLocked处于卡片状态。例如，isActive当鼠标进入或离开以下函数中的组件时，我会切换。toggleActive（我在构造函数中绑定）

但是，我收到一个错误，即在安装组件之前我无法设置状态。摸索了一下，登录this了各种功能，似乎是镭的问题。我在导出中使用了 Radium 包装器，如下所示：export default Radium(ProjectCard);，上面toggleActive记录ProjectCard为this，而componentDidMount记录RadiumEnhancer(ProjectCard)为this. 无镭的解决方法是使用 HoC，但我想我可以通过调整绑定 this 的范围来解决这个问题，所以我将函数绑定移动到componentDidMount，如下所示。（使用箭头函数自动绑定范围，如来自构造函数的调用）

但是，在 componentDidMount 中绑定并将鼠标悬停在组件上不会导致任何更改并toggleActive记录this为未定义。不走运，修复似乎不起作用。

但是，在尝试调试时，我手动调用了 toggleActive（如上所示）并记录RadiumEnhancer(ProjectCard)了（我想要的范围），并且奇迹般地，悬停功能开始工作（并且其他功能也获得了正确的范围）。

我的问题是：

• 不正确的范围/半径是否导致了 setState 错误？除了 setState 之外，代码中没有异步操作。
• 如果是这样，此修复是否合法？为什么我更改绑定的范围后它不起作用this？
• 为什么手动调用toggleActive赋予所有函数权限this和范围？

谢谢！以下是相关代码的 pastebin：https ://pastebin.com/MRKw2APw

我正在制作故事书。尝试加载生成的文件时，出现此错误。

我是React Environment 的新手，正在阅读教程并尝试使用可视集成终端安装Radium以实现 css 伪行为。

镭已安装并添加到 package.json

但是在进行更改并保存后编译失败并引发以下错误。

未找到模块：无法解析 'D:\maximillian-react\react-complete-guide\node_modules\radium\es' 中的 './../../webpack/buildin/global.js'

什么地方出了错？

并提前感谢

所以我有一个带有一些输入字段的表单。我已将它们设置font-weight为400. 它在 Chrome 和 Firefox 上运行良好，但在 Safari 上更大胆。在 Safari 中font-weight，它与其他浏览器相同，但它呈现得更大胆。我需要更改font-weight为300仅在 Safari 浏览器上。我在这里找到了CSShack for Safari only的答案。但问题是我正在使用我的组件Radium样式。React这是我当前的样式对象：

我需要在其中添加以下 CSS：

我怎样才能在镭中做到这一点？