React Styled Components如何用单个选择器同时设置自身与子元素样式

完全可以通过单个选择器块实现，不需要重复书写样式代码，以下是两种常用的实现方案：

方案1：使用CSS :is() 伪类（推荐） #

:is() 伪类支持将多个选择器合并为一组，可同时匹配当前元素自身与所有后代元素，仅需要写一次样式规则即可，实现代码如下：

const ImagePreviewWrapper = styled.div`
  &:is(&, *) {
    transition: 0.5s ease;
  }
`

兼容性说明：该特性支持Chrome 88+、Firefox 78+、Safari 14+，可覆盖绝大多数现代浏览器使用场景。

方案2：抽离公共样式变量（兼容低版本浏览器） #

如果需要适配更早版本的浏览器，可以将重复的样式逻辑抽为styled-components的插值变量，同样不需要重复编写样式内容，实现代码如下：

// 抽离公共样式常量
const commonTransition = 'transition: 0.5s ease;'

const ImagePreviewWrapper = styled.div`
  ${commonTransition}
  & * {
    ${commonTransition}
  }
`

注意：使用*通配符会匹配所有层级的后代元素，若项目对性能要求较高，可以根据实际业务需求缩小选择器匹配范围，避免无差别匹配不必要的元素。

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