Question

我最初有这种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），请帮助。（并且不要给我文档链接，我看过了，听不懂）

Answer 1

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

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')
    },

}}));

向上-> minWidth，向下-> maxWidth

这些是默认的断点

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

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

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

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

将CSS样式转换为材质ui makeStyles

1 个答案: