react js中css样式中的&是什么意思答案

【问题标题】：What is the meaning of & in css styling in react jsreact js中css样式中的&是什么意思
【发布时间】：2018-10-21 11:08:51
【问题描述】：

我最近开始学习 React js。我注意到在一些style.ts 文件中 & 在类声明之前已经使用了。

export const agGrid = {
    extend: [container],
    '& .ag-theme-material': {
        marginTop: '2rem'
    }
};

有人可以帮忙解决& 的用途吗？我认为使用的框架是jss，可以从package.json 文件中看到

【问题讨论】：

在 scss/sass api 中查看这个&
你能分享一些有用的链接吗？
css-tricks.com/the-sass-ampersand

标签： css reactjs jss

【解决方案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;
}

【讨论】：

.remove-arrow 来自哪里？

【解决方案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

【讨论】：