styled-components：如何结合:hover与:not()选择非selected属性组件？

直接用CSS属性选择器实现 #

你只需要把代码里的???替换成[selected]即可，CSS的属性选择器[selected]会匹配所有带有selected属性的元素，:not([selected])则正好选中没有该属性的元素。结合:hover伪类的最终代码如下：

const Button = styled.div`
    &:not([selected]):hover {
        color: red;
    }
`;

其他实现方式 #

除了纯CSS选择器的写法，还有两种常用思路：

• 利用styled-components的props判断
  styled-components支持直接读取组件传入的props，通过判断selected的值来控制hover样式，这种方式更贴合React的组件思维，动态变更props时样式会自动更新：

  const Button = styled.div`
      ${props => !props.selected && `
          &:hover {
              color: red;
          }
      `}
  `;
  

• 通过CSS层叠性覆盖样式
  先定义所有按钮的默认hover样式，再给带有selected属性的按钮单独设置hover样式进行覆盖，适合需要给选中状态hover配置不同样式的场景：

  const Button = styled.div`
      &:hover {
          color: red;
      }
      &[selected]:hover {
          color: inherit; // 这里替换为你需要的选中状态hover颜色
      }
  `;
  

内容的提问来源于stack exchange，提问作者user16909741