如何将此代码转换为具有其CSS的MUI组件

s4n0splo  于 2022-10-02  发布在  Java
关注(0)|答案(1)|浏览(188)

我有这个代码来创建一个带有CSS的英雄横幅,我的项目使用了Reaction和MUI作为前端。我不确定如何将此代码转换为MUI,我尝试了,但样式不起作用

HTML码:

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
      </svg>
    </div>

Css代码

.custom-shape-divider-top-1664680360 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
  }

  .custom-shape-divider-top-1664680360 svg {
    position: relative;
    display: block;
    width: calc(157% + 1.3px);
    height: 251px;
  }

  .custom-shape-divider-top-1664680360 .shape-fill {
    fill: #FFFFFF;
  }
nhaq1z21

nhaq1z211#

这可能会帮助您https://www.figma.com/community/plugin/1115700158761255786。您可以转换SVG图标并将其用作图标。其次,创建一个JSX组件,然后将其作为组件进行调用。

相关问题