如何使用 material ui card/box 设置此 div 的样式

Question

目前，我正在使用弯曲的 div 来包含 h1 和箭头图像（如所示）。有没有办法使用 material UI 组件来重新设计这个“黑盒子”的样式？

这个“黑盒子”的jsx代码部分：

<div className={homeStyles.flex}>
      <span>
        <h1 className={homeStyles.landingText}>LISTEN TO ORCAS LIVE!</h1>{' '}
      </span>
      <span className={homeStyles.landingArrow}>
        <Image src={arrow} width="30px" height="30px" />
      </span>
    </div>

CSS:

.flex {
  z-index: 2;
  display: flex;
  flex-direction: row;
  background-color: #000000;
  position: relative;
  border-radius: 20px;
  max-width: 600px;
  margin:0px auto 0 auto;
  transform: translateY(-500%);
  align-items: center;
  justify-items: center;
  width: 40vw;
  height:5rem

}

.landingText {
  font-family: 'Mukta', sans-serif;
  font-style: normal;
  font-size: 44px;
  line-height: 100%;
  color: white;
  padding: 27px 10px 29px 33px;
  position: relative;
  
}

.landingArrow {
  position: relative;
  top: 35%;
  right: 2px;
  width: 30px;
  flex-shrink: 0;
  padding-right: 4px;
}

我想更改它，因为当前设置不适用于所有屏幕尺寸。例如，对于较小的屏幕，文本和箭头图像未在框的末端和中间对齐：

Answer 1

我只打算 post 一个最小的例子，因为你似乎有足够的知识来调整它以满足你的需要！它应该相当响应，但我会让你充分测试它。

它使用Cards and Typography

return (
    <Card style={{backgroundColor: '#0f0059', borderRadius:'10px'}}>
      <Typography variant="h3" style={{color: "#ffffff"}}>
        LISTEN TO ORCAS LIVE! &rarr;
      </Typography>
    </Card>
  );

请注意，我使用了 style={{}}，但 Material 建议在他们的 documentation 中使用 sx。

如果这不能回答您的问题，我会留在评论中。

如何使用 material ui card/box 设置此 div 的样式

How to style this div using material ui card/box

html

css

jsx

reactjs

material-ui