[英]Child selectors with Glamorous css-in-js
I've trying out the Glamorous library for css-in-js and can not wrap my head around one thing. 我已经尝试了用于css-in-js的迷人图书馆,并且无法绕过一件事。
With vanilla css you can easily add styles to all selectors within a class, say: 使用vanilla css,您可以轻松地将类型添加到类中的所有选择器,例如:
.my-awesome-class div {
margin-right: 10px;
}
Is there any way to achive it with glamorous? 有没有办法用迷人的方式来实现它? For example in this snippet Im looking for a way to state that all the divs inside the container should have a margin-right
of 20px without the need to pass it to each component: 例如,在这个代码片段中我正在寻找一种方法来声明容器内的所有div应该具有20px的margin-right
,而不需要将它传递给每个组件:
import React from 'react';
import { render } from 'react-dom';
import glamorous, {Div} from 'glamorous';
const Container = glamorous.div({
display: 'flex'
});
class App extends React.Component {
render() {
return (
<Container>
<Div backgroundColor="tomato" padding="10px">One</Div>
<Div backgroundColor="wheat" padding="10px">Two</Div>
<Div backgroundColor="salmon" padding="10px">Three</Div>
</Container>
);
}
}
render(<App />, document.getElementById('root'));
here's a link to the working snippet: https://stackblitz.com/edit/glemorouschildselector 这是工作片段的链接: https : //stackblitz.com/edit/glemorouschildselector
glamorous component factory style arguments are powered by glamor which has support for contextual selectors. 迷人的组件工厂风格的论据由魅力驱动,支持上下文选择器。
contextual selectors: & will be replaced by the 'pointer' to the target rule 上下文选择器:&将被目标规则的“指针”替换
const Container = glamorous.div(
{
display: 'flex',
'& div': {
marginRight: '20px',
},
},
)
glamor selector documentation: https://github.com/threepointone/glamor/blob/master/docs/selectors.md 魅力选择器文档: https : //github.com/threepointone/glamour/blob/master/docs/selectors.md
Working demo: https://stackblitz.com/edit/glemorouschildselector-fzj77j 工作演示: https : //stackblitz.com/edit/glemorouschildselector-fzj77j
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.