属性选择器可以与样式组件一起使用吗？

Question

经过一些研究，我找不到有关样式组件中属性选择器（即 [attr=value]）用法的信息。但是，我仍然认为 styled-components 很有可能支持属性选择器......但如果不应该，它有哪些等价物？

例如，如果我有下面的代码

.squares li[data-level='1'] {
    background-color: var(--light);
}

.squares li[data-level='2'] {
    background-color: var(--medium);
}

.squares li[data-level='3'] {
    background-color: var(--dark);
}

.squares li[data-level='4'] {
    background-color: var(--darkest);
}

如何通过 styled-components 实现？

Answer 1

非常简单，需要创建样式组件，例如“Squares”，并为具有属性“data-value='N'”的嵌套列表项定义样式

const Squares = styled.div`
  li[data-level='1'] {
    background-color: var(--light);
  }

  li[data-level='2'] {
      background-color: var(--medium);
  }

  li[data-level='3'] {
      background-color: var(--dark);
  }

  li[data-level='4'] {
      background-color: var(--darkest);
  }
`

Answer 2

我明白了；这就是我所做的：

const SquareListItem = styled.li`
        border-radius: 3px;
        border: 1px rgba(27, 31, 35, 0.06) solid;
        background-color: ${colour[0]};
        &[data-level='1'] {
            background-color: ${colour[1]};
        }
        &[data-level='2'] {
            background-color: ${colour[2]};
        }
        &[data-level='3'] {
            background-color: ${colour[3]};
        }
        &[data-level='4'] {
            background-color: ${colour[4]};
        }
        /* tooltip */
        &[data-tooltip] {
            position: relative;
            cursor: pointer;
        }

        &[data-tooltip]:before,
        &[data-tooltip]:after {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        &[data-tooltip]:before {
            position: absolute;
            z-index: 999;
            bottom: 150%;
            left: 100%;
            margin-bottom: 5px;
            margin-left: -90px;
            padding: 7px;
            width: 150px;
            border-radius: 3px;
            background-color: #000;
            background-color: hsla(0, 0%, 20%, 0.9);
            color: #fff;
            content: attr(data-tooltip);
            text-align: center;
            font-size: 10px;
            line-height: 1.2;
        }

        &[data-tooltip]:after {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-left: -5px;
            width: 0;
            border-top: 5px solid hsla(0, 0%, 20%, 0.9);
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: ' ';
            font-size: 0;
            line-height: 0;
            z-index: inherit;
        }

        /* show tooltip content on hover */
        &[data-tooltip]:hover:before,
        &[data-tooltip]:hover:after {
            visibility: visible;
            opacity: 1;
        }
    `

属性选择器可以与样式组件一起使用吗？

can attribute selectors be used with styled-components?

css

reactjs

css-selectors

styled-components