React18 —— styled-components 动画效果样式混入

React18 中可以使用许多流行的 CSS in JS 库，如 styled-components、Emotion、JSS 等等。以下以 styled-components 为例，介绍如何在 React 组件中使用 CSS in JS 实现 box-shadow 动画效果和样式混入。

首先，安装 styled-components：

npm install --save styled-components

然后，在组件中引入 styled-components 并定义样式。具体实现方式如下所示：

import React from 'react';
import styled, { css } from 'styled-components';

// 定义组件样式
const Box = styled.div`
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s ease-in-out;
  ${(props) =>
    props.hover &&
    css`
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
    `}
`;

// 定义组件
const MyComponent = () => {
  const [hover, setHover] = React.useState(false);

  return (
    <Box hover={hover} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>
      {/* 内容 */}
    </Box>
  );
};

export default MyComponent;

上面的代码中，我们使用了 styled-components 库来创建一个名为 Box 的 div 元素，并定义了初始化样式和过渡效果。同时，我们在样式中使用了 styled-components 提供的 props 属性，根据不同的情况来动态渲染样式。具体来说，当 hover 属性为 true 时，Box 组件将应用新的 box-shadow 样式，从而实现了 box-shadow 动画效果。

另外，styled-components 还支持定义样式混入（mixin）。具体实现方式如下所示：

import React from 'react';
import styled, { css } from 'styled-components';

// 定义样式混入对象
const mixin = css`
  color: #ffffff;
  font-size: 16px;
`;

// 创建组件样式
const Box = styled.div`
  ${mixin};
  width: 200px;
  height: 200px;
  background-color: #ffffff;
`;

// 定义组件
const MyComponent = () => {
  return <Box>内容</Box>;
};

export default MyComponent;

上面的代码中，我们首先定义了一个名为 mixin 的样式混入对象，并将其应用在 Box 样式中。这样，在定义 Box 组件时，我们就可以复用 mixin 中定义的样式，从而达到样式复用的效果。