css穿透

CSS穿透是指在React或其他CSS-in-JS库中，如Emotion或Styled-components等，通过选择器穿透子组件的样式，直接影响子组件的样式。这种技术在前端开发中被广泛使用，可以在一些特定情况下实现更灵活的样式控制和覆盖。

常规情况下，使用CSS进行样式控制时，只能通过层级选择器来选取目标元素的样式。但在React或CSS-in-JS库中，组件的样式通常被封装在组件内部，外部无法直接选取和修改组件内部的样式。这就导致了一些情况下无法通过传统的CSS选择器来实现一些样式需求，这时就需要使用CSS穿透技术。

使用CSS穿透技术，可以在父组件中通过选择器，直接选取到子组件内部的样式，从而实现覆盖或调整子组件的样式。这种方式通过给子组件提供一个特殊的className或prop，来实现让父组件能够访问并覆盖子组件的样式。

CSS穿透有以下几种常用的用法：

1. 使用普通的选择器：通过给子组件添加一个特殊的className，父组件通过选择器选取到该className，从而实现样式覆盖。

例如，在父组件中：

```jsx

```

在子组件中：

```jsx

```

在CSS中：

```css

.special-class {

color: red;

}

```

2. 使用伪类选择器：通过伪类选择器来选取到组件内部的某个元素的样式。

例如，在父组件中：

```jsx

```

在子组件中：

```jsx

```

在CSS中：

```css

.container :first-child {

color: red;

}

```

上述例子中，通过使用`container :first-child`选择器，选取到子组件内的*个元素并设置样式。

3. 使用props传递样式：通过将样式作为props传递给子组件，实现子组件内部样式的覆盖。

例如，在父组件中：

```jsx

```

在子组件中：

```jsx

```

上述例子中，将`style={{ color: 'red' }}`作为props传递给子组件，并在子组件中使用`style={props.style}`将样式应用到内部元素。

尽管CSS穿透技术可以帮助我们在特定情况下实现样式的覆盖和调整，但过多地使用CSS穿透可能会导致样式层级的混乱和维护的困难。因此，在使用CSS穿透时，需要谨慎考虑是否真的有必要使用，以及是否能通过其他方式来实现相同的样式效果。