如何将纯CSS实现的曲线效果代码适配为styled-components或Material UI写法

方案1：styled-components 写法 #

import styled from 'styled-components';

const CurveContainer = styled.div`
  position: relative;
  width: 200px;
  height: 50px;
  background-color: blue;
  border-radius: 9999px 0 0 9999px;
  margin: 30px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
`;

const CurveEdge = styled.div`
  position: absolute;
  height: 30px;
  width: 30px;
  right: 0;
  overflow: hidden;
  ${props => props.position === 'top' ? 'top: -30px' : 'bottom: -30px'};

  &::before {
    content: "";
    position: absolute;
    right: 0;
    ${props => props.position === 'top' ? 'top: -100%' : 'bottom: -100%'};
    height: 200%;
    width: 200%;
    border-radius: 100%;
    box-shadow: 10px 10px 5px 100px blue;
    z-index: -1;
  }
`;

// 组件使用示例
const CurveComponent = () => {
  return (
    <CurveContainer>
      曲线效果
      <CurveEdge position="top" />
      <CurveEdge position="bottom" />
    </CurveContainer>
  );
};

方案2：Material UI makeStyles 写法（适用于MUI v4） #

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  curveContainer: {
    position: 'relative',
    width: '200px',
    height: '50px',
    backgroundColor: 'blue',
    borderRadius: '9999px 0 0 9999px',
    margin: '30px',
    textAlign: 'center',
    color: '#fff',
    paddingTop: '10px',
  },
  edge: {
    position: 'absolute',
    height: '30px',
    width: '30px',
    right: 0,
    overflow: 'hidden',
    '&::before': {
      content: '""',
      position: 'absolute',
      right: 0,
      height: '200%',
      width: '200%',
      borderRadius: '100%',
      boxShadow: '10px 10px 5px 100px blue',
      zIndex: -1,
    }
  },
  topEdge: {
    top: '-30px',
    '&::before': {
      top: '-100%',
    }
  },
  bottomEdge: {
    bottom: '-30px',
    '&::before': {
      bottom: '-100%',
    }
  }
});

// 组件使用示例
const CurveComponent = () => {
  const classes = useStyles();
  return (
    <div className={classes.curveContainer}>
      曲线效果
      <div className={`${classes.edge} ${classes.topEdge}`} />
      <div className={`${classes.edge} ${classes.bottomEdge}`} />
    </div>
  );
};

注：原CSS代码缺少#bottom::before的定位规则，上述两种方案均已补全该规则，可直接运行得到正确的曲线效果。

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