如何通过 react-loading-skeleton 为 Skeleton 制作边框半径？答案

【问题标题】：How to make a border-radius for Skeleton by react-loading-skeleton?如何通过 react-loading-skeleton 为 Skeleton 制作边框半径？
【发布时间】：2021-11-17 13:05:52
【问题描述】：

我需要使用 react-loading-skeleton 库创建骨架。一项应具有如下图所示的边框半径。

你知道怎么做吗？

我的库版本： "react-loading-skeleton": "1.2.0"（升级可能性小）

我尝试用这种方式解决它，但它不起作用:(

<Skeleton
    width={127}
    borderRadius={12.5}
/>

【问题讨论】：

在你的骨架中添加一个包装器，就像在文档中一样：github.com/dvtng/react-loading-skeleton#custom-wrapper 使用 css 边界半径，必要时可能会隐藏溢出。
我试过了，没用

标签： reactjs react-loading-skeleton

【解决方案1】：

使用这样的包装器：

.rounded-skeleton {
  border-radius: 200px;
  overflow: hidden;
}

JSX：

  <div className="rounded-skeleton">
    <Skeleton />
  </div>

CodeSandbox here

【讨论】：