What is the meaning of & in css styling in react js

Question

I have recently started learning to react js. I noticed that in some of the style.ts files & has been used before the class declaration.

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

Can someone please help what is & for? I think the framework used is jss that is visible from package.json file

Behah

See about this & in scss/sass api – Finicky

can you please share some useful link? – Behah

css-tricks.com/the-sass-ampersand – Finicky

Answer 1

& is basically using to denote the parent in a nested sass/scss.

agGrid = {
    '& .ag-theme-material': {
        marginTop: '2rem'
}

Will be converted as

agGrid .ag-theme-material {
    margin-top: 2rem
}

into CSS

Or in another example using SCSS

.wrapper {
    &:before, &:after {
        display: none;
    }
}

will be converted into

.wrapper::before {
    display: none;
}
.wrapper::after {
    display: none;
}

Barthel

from where .remove-arrow is coming? – Behah

Answer 2

& is used to reference selector of the parent rule.

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'
    }
  }
}

Compiles to:

.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;
}

Find out more over here - http://cssinjs.org/jss-nested?v=v6.0.1

Agustin