styled-components自定义组件box-shadow样式不生效如何解决

使用styled(自定义组件)语法扩展组件样式时，styled-components 会将生成的自定义样式类名通过className属性传递给被包装的组件。当前Block组件未接收、也未将该className透传到内部实际渲染的DOM包装层Wrap上，导致box-shadow样式没有挂载到最终渲染的元素，无法生效。

修改Block.jsx代码，接收传入的className属性并绑定到内部的Wrap组件上即可：

import React from 'react';
import styled from 'styled-components';
import { WHITE } from '../../constants/color';

const Wrap = styled.div`
  width: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: ${WHITE};
`;

const Block = ({ children, className }) => {
  // 透传外部传入的className到Wrap组件
  return <Wrap className={className}>{children}</Wrap>;
};

export default Block;

说明：Wrap本身是styled-components创建的组件，会自动合并自身内置类名和外部传入的className，不需要手动做类名拼接操作。修改完成后，Footer中为CustomBlock设置的阴影样式即可正常生效。

内容的提问来源于stack exchange，提问作者고윤태