score:6
Accepted answer
&
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;
}
score:8
&
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
Source: stackoverflow.com
Related Query
- What is the meaning of & in css styling in react js
- What is the meaning of xs, md, lg in CSS Flexbox system?
- What exactly is the timeout value in React CSS Transition Group doing?
- React styled-component / e2e testing: What is the best way to use css selector?
- What is the best way to apply layout styling to styled-components and React components used in different places on a site?
- What is meaning of symbol &tagname: for css styling in material UI. Ex: &div: { display: 'flex' '}
- internal CSS styling in React at the top of code
- What is the best way to include css files for Prime React components when using Parceljs?
- How do I find out what CSS is determining the dimensions of my React header component?
- Props object what is the meaning of passing children to the component from React official documentation
- Why is the CSS module styling not being applied on the first component in a list of react child components?
- What might be missing in my React project that the CSS stylings aren't getting applied to my components?
- What is the difference between React Native and React?
- What is the difference between using constructor vs getInitialState in React / React Native?
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- What is the best way to access redux store outside a react component?
- What is the meaning of 'No bundle URL present' in react-native?
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- What is the best way to redirect a page using React Router?
- What is the best way to trigger onchange event in react js
- What is the meaning of {...this.props} in Reactjs
- What is the best way to deal with a fetch error in react redux?
- what is the preferred way to mutate a React state?
- What is the difference between NextJs and Create React App
- What is the quickest way to convert a React app to React Native?
- React with Redux? What about the 'context' issue?
- What is the TypeScript return type of a React stateless component?
- react custom hooks vs normal functions, what is the difference
- What is the default unit of style in React Native?
- What is the difference between hashHistory and browserHistory in react router?
More Query from same tag
- Testing React component with dynamic import (Enzyme/Mocha)
- Deleting item on to do list
- TypeError: Cannot read property 'key' of undefined
- Delete an element from an array (RecoilJS)
- How to pass props between React Routes 4
- Material UI DataGrid - how to tell which rows user has selected?
- React - Login success redirect and auth headers
- How to append html video tag to a div in React
- How to scroll and expand an Accordion by onClick on an icon from a component?
- React Native - Redux : Multiple instances of same state in app
- How to use React Native Animate to change view flex from 0 to 1
- Imported module default.register is not a function
- Redux store changes when reload page
- Update specific state with given key and value?
- Redux - Returns call function informations to update props / state
- React material-table is not displaying table icons
- Trying to implement local storage in React. It is not tracking the input value that I send
- How to make my react-multi-carousel use a light-box feature for my ReactJS app
- React Material UI modal not opening
- React Native crashes after upgrade to version 0.56. Possible Babel issue?
- "Download Network Failed" - Chrome failes on 160kb tiff file in React Redux app
- Axios XMLHttpRequest - Network error on body exceeding a certain size
- Generic fetch replay to handle token refresh
- Gatsby static path not resolving
- Warning: Can't perform a React state update on an unmounted component. useEffect cleanup function
- Having problem with adding data to mdbtable in react
- How should I modify my css to make the image getting closer to my text when I narrow the browser?
- React - Re-render child component when parent state is updated
- Material-UI: Native Select when using Dark theme on Windows Browsers has white text on white background
- React Axios Get method : Accessing key, value elements from the response