如何将以下属性从 CSS 转换为 Mui？

Question

我正在尝试将我的 css 代码迁移到使用 MUI 提供的 sx prop 和 styled()，但我没有在文档中看到如何将以下内容转换为正确的 MUI 语法.谁能帮帮我？

.landing {
  position: relative;
  max-height: fit-content;
  transform: translateY(-80%);
  left: calc(50% - 800.05px / 2 - 204.98px);
  letter-spacing: -0.02em;
}

在 jsx 中：

<div className={homeStyles.landing}>

Answer 1

您可以使用 MUI makeStyles 来实现它。
代码示例如下：

const homeStyles = makeStyles(() => ({
    landing: {
        position: 'relative',
        letterSpacing: '2px'
    }
})

然后你可以使用这个 class.

const styles = homeStyles();

<div className={styles.landing}>hi</div>

这是您可以参考的文档： makeStyles

如何将以下属性从 CSS 转换为 Mui？

How to convert the following properties from CSS to Mui?

html

css

reactjs

material-ui