[英]What's the most performant but full-featured styling method in React.js
I have been reading a lot blog posts, best practices and slides (eg CSS in JS by Christopher Chedeau aka 'vjeux' which I think is great). 我一直在阅读很多博客文章,最佳实践和幻灯片(例如Christopher Chedeau的JS CSS,又称“ vjeux”,我认为这很棒)。
I totally understand why it is "better" to set your styling directly within your React Component, but I then found out that this might be limited as well. 我完全理解为什么直接在React Component中设置样式是“更好”的原因,但是后来我发现这也可能受到限制。 You may not use CSS pseudo-classes nor media queries to handle some responsive styling issues.
您不得使用 CSS 伪类或媒体查询来处理某些响应式样式问题。
As someone who is used to do a lot of work with CSS and lately with SASS (which I still love) this drives me in some kind of cleavage, because I do not want to disclaim any styling property which standard CSS gives me. 作为曾经使用CSS以及最近使用SASS(我仍然爱着)做大量工作的人,这使我有些裂开,因为我不想否认标准CSS给我的任何样式属性。
My question now is: Is it possible to have your styling within your React Components without those given disadvantages , and if: How would you actually do it to achieve the best performance and maximum of clarity . 现在我的问题是: 是否可以 在React Components中 进行样式设计而没有那些给定的缺点 ,以及是否:您将如何实际实现最佳性能和最大程度的清晰度 。
Check out https://github.com/FormidableLabs/radium . 查看https://github.com/FormidableLabs/radium It's pretty cool.
它太酷了。 Here's an example where they show how to add media queries among other things.
这是一个示例,其中他们展示了如何添加媒体查询等。
var styles = {
base: {
backgroundColor: '#0074d9',
border: 0,
borderRadius: '0.3em',
color: '#fff',
cursor: 'pointer',
fontSize: 16,
outline: 'none',
padding: '0.4em 1em',
':hover': {
backgroundColor: '#0088FF'
},
':focus': {
backgroundColor: '#0088FF'
},
':active': {
backgroundColor: '#005299',
transform: 'translateY(2px)',
},
// Media queries must start with @media, and follow the same syntax as CSS
'@media (min-width: 992px)': {
padding: '0.6em 1.2em'
},
'@media (min-width: 1200px)': {
padding: '0.8em 1.5em',
// Media queries can also have nested :hover, :focus, or :active states
':hover': {
backgroundColor: '#329FFF'
}
}
},
red: {
backgroundColor: '#d90000',
':hover': {
backgroundColor: '#FF0000'
},
':focus': {
backgroundColor: '#FF0000'
},
':active': {
backgroundColor: '#990000'
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.