как использовать селектор брата css в стиле - PullRequest
Новая
       13

как использовать селектор брата css в стиле

0 голосов
/ 15 января 2020

У меня есть стилизованный компонент, который выглядит следующим образом: 

import styled from 'styled-components';
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;
`;

Как я могу использовать братьев и сестер в этом случае & + &?

Я хочу добиться чего-то вроде: 

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

Как мне этого добиться?

1 Ответ

1 голос
/ 15 января 2020

Это делается так же, как в S CSS с &: 

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

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

Вы также можете использовать стили с элементами html, но приведенный выше код лучше использовать 

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

По сути, вы можете делать любые вложения с помощью &

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

Вы можете прочитать это в официальных документах: https://styled-components.com/docs/basics#pseudoelements -pseudoselectors-and-nesting

...