我正在构建React组件。我在this brilliant presentation中建议的组件中添加了CSS内联,其中一个是React背后的人。我一直在努力寻找一种方法来内联添加CSS伪类,比如在演示文稿中标题为“:: after”的幻灯片上。不幸的是,我不仅需要添加content:"";
属性,还需要添加position:absolute; -webkit-filter: blur(10px) saturate(2);
。幻灯片显示了如何通过qazxswpoi添加内容,但是如何添加其他属性?
得到了@Vjeux在{/* … */}
团队的回复:
普通的HTML / CSS:
React
与内联样式反应:
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
诀窍是,不是在CSS中使用render: function() {
return (
<div>
<span>Something</span>
<div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
</div>
);
},
来创建新元素,而应该通过React创建一个新元素。如果您不想在任何地方添加此元素,请创建一个为您执行此操作的组件。
对于像::after
这样的特殊属性,编码它们的方法是删除破折号 - 并将下一个字母大写。所以它变成了-webkit-filter
。请注意,做WebkitFilter
也应该有效。
内联样式不能用于定位伪类或伪元素。您需要使用样式表。
如果要动态生成CSS,那么最简单的方法是创建一个DOM元素{'-webkit-filter': ...}
。
<style>
内联样式不支持伪或规则(例如,@ media)。建议范围从重新实现CSS中的CSS功能,如<style dangerouslySetInnerHTML={{
__html: [
'.my-special-div:after {',
' content: "Hello";',
' position: absolute',
'}'
].join('\n')
}}>
</style>
<div className='my-special-div'></div>
通过:hover
和onMouseEnter
等CSS状态,使用更多元素重现onMouseLeave
和:after
之类的伪元素,只使用外部样式表。
个人不喜欢所有这些解决方案。通过JavaScript重新实现CSS功能不能很好地扩展 - 也没有添加多余的标记。
想象一个庞大的团队,每个开发人员都在重建像:before
这样的CSS功能。每个开发人员都会采用不同的方式,随着团队规模的扩大,如果可以完成,就会完成。事实是使用JavaScript有大约n种方法来重新实现CSS功能,随着时间的推移,你可以打赌所有这些方式的实现最终结果是意大利面条代码。
那么该怎么办?使用CSS。你问过内联样式会让你觉得你很可能在CSS-in-JS阵营(我也是!)。已经发现colocating HTML和CSS与JS和HTML一样有价值,很多人还没有意识到(JS-HTML托管起初也有很多阻力)。
在这个名为:hover
的空间中制作了一个解决方案,它可以让您在React组件中编写明文CSS。无需浪费周期在JS中重新发明CSS。正确工作的正确工具,这是使用Style It的示例:
:after
功能语法(npm install style-it --save
)
JSFIDDLE
JSX语法(import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`,
<div id="heart" />
);
}
}
export default Intro;
)
JSFIDDLE
从import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`}
<div id="heart" />
</Style>
}
}
export default Intro;
拉出心脏的例子
不是问题的直接答案,但这可能有助于那些使用Typescript创建CSS-Tricks信息时遇到问题的人。
我收到一个错误,告诉我以下内容不正确:
style
错误告诉我“财产类型'的位置是不相容的”。我不知道为什么。
我通过添加严格的Typescript声明修复了这个问题,如下所示:
let iconStyle = {
position: 'relative',
maxHeight: '90px',
top: '25%',
}
这有效。