javascript - how to use sibling selector css in styled - Stack Overflow

admin管理员组

文章数量:1336367

I have a styled ponent which looks like:

import styled from 'styled-ponents';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

export const CategoryList = styled(List)`
`;
//this is what i want to change
export const CategoryListItem = styled(ListItem)`
  border-top: 2px solid #f4f4f4;
`;

export const CategoryListItemText = styled(ListItemText)`
  padding-left: 5px;
`;

export const ListItemHeading = styled(ListItem)`
  background-color: #f4f4f4;
`;

How can I use siblings in this case & + & ?

I want to achieve something like :

li + li {
border-top: 1px solid red;
}

How can I achieve this?

I have a styled ponent which looks like:

import styled from 'styled-ponents';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

export const CategoryList = styled(List)`
`;
//this is what i want to change
export const CategoryListItem = styled(ListItem)`
  border-top: 2px solid #f4f4f4;
`;

export const CategoryListItemText = styled(ListItemText)`
  padding-left: 5px;
`;

export const ListItemHeading = styled(ListItem)`
  background-color: #f4f4f4;
`;

How can I use siblings in this case & + & ?

I want to achieve something like :

li + li {
border-top: 1px solid red;
}

How can I achieve this?

• javascript
• css
• reactjs
• ecmascript-6
• styled-ponents

Share Improve this question Follow edited Jan 15, 2020 at 18:41 Brett DeWoody 62.9k3131 gold badges144144 silver badges192192 bronze badges asked Jan 15, 2020 at 18:30 AckmanAckman 1,59266 gold badges3232 silver badges5757 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This is done the same way as in SCSS with &:

export const CategoryListItem = styled(ListItem)`
  border-top: 2px solid #f4f4f4;

  & + & { // this will work for <CategoryListItem /><CategoryListItem />
    border-top: 1px solid red;
  }
`;

You can also style with html elements but the code above is a better practice

& + li { // this will work for <CategoryListItem /><li />
  border-top: 1px solid red;
}

Basically you can do any nesting with &

& li { // this will work for <CategoryListItem><li /></CategoryListItem>
}
& li.test { // this will work for <CategoryListItem><li class="test" /></CategoryListItem>
}

You can read it up in the official docs: https://styled-ponents./docs/basics#pseudoelements-pseudoselectors-and-nesting

本文标签： javascripthow to use sibling selector css in styledStack Overflow