- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以将所有内联 Radium 样式提取到类中,以便 html 不会因所有内联样式而变得丑陋?
我有这个:
@Radium
class ExtendedComponent extends Component {
render() {
return (
<div style={[styles.color, styles.box]}</div>
);
}
}
const styles = {
color: {
color: green
},
box: {
borderColor: red,
height: '20px',
width: '20px'
}
};
现在输出的 HTML 看起来像这样:
<div style="color: green; border-color: red; height: 20px; width: 20px;"></div>
我希望它是这样的:
<div class="c1"></div>
CSS 规则将包含以下内容:
.c1 {
color: green;
border-color: red;
height: 20px;
width: 20px;
}
最佳答案
据我所知不是。就其本质而言,Radium 用于动态计算和应用“内联”样式,并通过在 JS 中捆绑样式来利用 React 组件“模块”。
React 风格从下面链接的列表中,这似乎可以满足您的需求。请参阅“在构建时将样式提取到 CSS”部分 - https://github.com/js-next/react-style#extracting-styles-into-css-at-build-time
替代库这是一些替代方案的链接,它们可以满足您的需求:https://github.com/FormidableLabs/radium/tree/master/docs/comparison .
关于javascript - Radium 内联 CSS - 构建导出类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41185510/
我正在尝试使用 Radium 编写干净和干燥的代码样式。到目前为止,这就是我的按钮。 /** * * Button * */ import React, { PropTypes } from 'rea
I want to dynamically change, say, the background color of the button dynamically. 如果这是我的 radium js
我收到以下错误:“TypeError: Cannot read property 'styleKeeperContext' of undefined”,当我尝试将悬停伪类添加到我正在使用 Radium
是否可以将所有内联 Radium 样式提取到类中,以便 html 不会因所有内联样式而变得丑陋? 我有这个: @Radium class ExtendedComponent extends Compo
我一直在此处和文档中寻找答案,但似乎找不到。这是Radium documentation . 我想知道是否有办法在 React 中设置链接样式?具体来说,a、a:hover、a:visited 等。
我有两个组件,它们使用相同的布局/样式但内容不同。我在 React.js 中使用 Radium。我在其中一个组件中使用了内联样式,并希望对其他组件使用相同的样式。我是 Radium 和 React 的
所以我做了 npm install radium 它在我的节点模块文件夹中安装了镭(我可以在那里看到它) 这也是我的 json 包,其中包含其他安装(也许 Radium 与其他东西有冲突?)
Radium不适用于 React Router IndexLink 组件。我用了FAQ's method但这并不能解决问题。 这是我的代码: import React, {PropTypes} fro
通常当我在我的 React 应用程序中使用 Radium 时,我会简单地将我导出的类包装在 Radium 中 export default Radium(App) 和媒体查询将按预期工作。但是,我想同
我正在尝试结合 Radium 和 Material-ui。当我尝试在单个 Material-ui 组件上应用多种样式时,没有应用任何样式。因此,例如,这样的事情不会产生任何样式应用: 当然,如果我这
当使用 react-router 和 Radium 进行服务器端渲染时,我收到以下警告,似乎来自 Radium 在客户端而不是在服务器上附加 css 前缀。 Warning: React attemp
我刚刚开始学习Radium,所以请忽略我的无知。如果说CSS 文件 有什么优点的话,那就是您在主APP 组件中链接到它们一次就可以忘记它们,它们被缓存并且可以简单地在您的所有组件中使用。 但是,您无法
我正在投影图像,然后检查它: 高度是20px。这是正确的。 然后我检查包含 img 的 data-radium 元素,令我惊讶的是: 尽管没有内容,该元素的高度“增长”了两个像素。此外,data-ra
这就是我的组件的样子 import React from "react"; import Radium from "radium"; import StyleRoot from "radium"; v
当我将我的 React 应用程序从版本 15.4.1 更新到 React 16.8.6 时,出现错误无法读取 Object../node_modules/radium/lib/components 处
我是一名优秀的程序员,十分优秀!