我最近开始学习响应 js。我注意到在一些style.ts文件中 & 已经在类声明之前使用了。
export const agGrid = {
extend: [container],
'& .ag-theme-material': {
marginTop: '2rem'
}
};
有人可以帮忙&吗？我认为使用的框架jss是从package.json文件中可见的
react js中css样式中&的含义是什么
IT技术
css
reactjs
jss
2021-05-15 18:43:40
2个回答
& 用于引用父规则的选择器。
const styles = {
container: {
padding: 20,
'&:hover': {
background: 'blue'
},
// Add a global .clear class to the container.
'&.clear': {
clear: 'both'
},
// Reference a global .button scoped to the container.
'& .button': {
background: 'red'
},
// Use multiple container refs in one selector
'&.selected, &.active': {
border: '1px solid red'
}
}
}
编译为：
.container-3775999496 {
padding: 20px;
}
.container-3775999496:hover {
background: blue;
}
.container-3775999496.clear {
clear: both;
}
.container-3775999496 .button {
background: red;
}
.container-3775999496.selected, .container-3775999496.active {
border: 1px solid red;
}
在此处了解更多信息 - http://cssinjs.org/jss-nested?v=v6.0.1
& 基本上用于表示嵌套 sass/scss 中的父级。
agGrid = {
'& .ag-theme-material': {
marginTop: '2rem'
}
将被转换为
agGrid .ag-theme-material {
margin-top: 2rem
}
成 CSS
或者在另一个使用 SCSS 的例子中
.wrapper {
&:before, &:after {
display: none;
}
}
将被转换为
.wrapper::before {
display: none;
}
.wrapper::after {
display: none;
}