时间戳

首页 > 解决方案 > 将 css 样式转换为材质 ui makeStyles

css - 将 css 样式转换为材质 ui makeStyles

问题描述

我最初有这个 CSS 样式

const Root = styled.div`
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
  position: relative;

  @media (min-width: ${(p) => p.theme.screen.md}) {
    width: ${(p) => p.theme.screen.md};
// p.theme.screen.md is 1007px
  }

  @media (min-width: ${(p) => parseInt(p.theme.screen.lg, 10) + 20 + 'px'}) {
    width: ${(p) => p.theme.screen.lg};
// p.theme.screen.lg is 1100px
  }
`;

我想将其转换为材质 ui makeStyle css 我能够做到这一点

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'row',
    margin: '0 auto',
    padding: '20px',
    width: '100%',
    position: 'relative',
  },
}));

我不明白如何改变那些@media 的东西（mixins），请有人帮忙。（并且不要给我文档链接，我读了它，但无法理解）

标签： cssreactjsmaterial-ui

解决方案

您可以使用主题对象中的断点来添加基于宽度的样式

const useStyles = makeStyles((theme) => ({
root: {
    display: 'flex',
    flexDirection: 'row',
    margin: '0 auto',
    padding: '20px',
    width: '100%',
    position: 'relative',
    [theme.breakpoints.up('md')]: {
        // if you want to set the md size value
        width:theme.breakpoints.width('md')
    },
    [theme.breakpoints.up('lg')]: {
        // if you want to set the lg size value
        width:theme.breakpoints.width('lg')
    },

}}));

向上 -> 最小宽度，向下 -> 最大宽度

这些是默认断点

xs 超小：0 像素，sm 小：600 像素，md 中：960 像素，lg 大：1280 像素，xl 超大：1920 像素，

编辑：用于更新默认断点主题值

您需要在传递给 ThemeProvider 的主题对象中传递断点对象及其值，如下所示

  const theme = {
  ...
  breakpoints: {values: {xs: 0, sm: 600, md: 1007, lg: 1100, xl: 1920}}
  }

推荐阅读