将 css 样式转换为材质 ui makeStyles

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 的东西（混合），请有人帮忙。 （而且不要给我文档链接，我看了，看不懂）

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

}}));

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

这些是默认断点

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

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

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

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