时间戳

首页 > 解决方案 > 双 & 号选择器 '&&' 有什么作用（在 Material-UI React 中使用 makeStyles 覆盖根类）？

css - 双 & 号选择器 '&&' 有什么作用（在 Material-UI React 中使用 makeStyles 覆盖根类）？

问题描述

我是使用 Material-UI 的新手。在我的项目中，我无法覆盖Avatar 的根 Material-UI 根类，更具体地说是MuiAvatar-root。

Material-Ui 版本：4.11.3

我按照这里显示的 material-ui 的示例进行了覆盖，但效果不佳。

在下面的头像中

第一

<Grid item>
    <Avatar alt="avatar" src={avatar} classes={{root: classes.root }} />
</Grid>

因为下面的那个不起作用，几乎没有其他方法也起作用。

root: {
    width: "128px",
    height: "128px",
    margin: "8px",
},

但是，我可以在我的全局主题样式中使用下面的 overrides 键来覆盖它

const theme = createMuiTheme({
  // Not Required
  overrides: {
    MuiAvatar: {
      root: {
        width: "128px",
        height: "128px",
        margin: "8px",
      },
    }
  },
  palette: {
    primary: { 
      light:'#fff', 
      main: '#158ade', //Curious Blue
      contrastText: '#f1de39', //golden dream
      dark: '#cd4315', //tia maria
     },
    secondary: {
      light: '#DAE9F1', //Black Squeeze
      main: '#D1D100',  //Corn
      dark: '#2D344D', //Martinique 
      contrastText: '#000',
    },
  },
});

但这也弄乱了我在项目中使用的所有我不想要的头像。下面的例子：
2

<Container className={classes.center}>
    <Avatar className={ classes.avatar }>
        <ContactMailIcon />
    </Avatar>
</Container>

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  heading: {
    color: theme.palette.primary.dark,
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: "#ff4838",
    alignItems: 'center',
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
  center: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column'
    }
}));

但是，在以下两种情况下，我以某种方式使用 '&&' 解决了这个问题（在搜索覆盖时遇到了 '&' 并且只是在命中和试用期间工作），如下所示：

参考第 1

root: {
        '&&': {
            width: "128px",
            height: "128px",
            margin: "8px",
        }
    },

和下面的第二个

export const useContactStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    heading: {
        color: theme.palette.primary.dark,
    },
    avatar: {
        "&&": {
            margin: theme.spacing(1),
            backgroundColor: "#ff4838",
            alignItems: 'center',
        }
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },

    center: {
        "&&": {
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'column'
        }
    }
}));

这确实覆盖了默认的MuiAvatar-root类，并且我能够单独更改样式，但是，我不确定 '&&' 甚至 '&' 是做什么的，我知道它与 SASS 有关，但我从来没有使用过它以及它是如何在这里工作的。

我只想了解如何使用双 & 号覆盖根类。即 MuiAvatar-root 在这种情况下。我只是在命中和审判期间使它工作，不知道这是否是正确的方法。

编辑

**正如@Bassem 和本文所解释的，“&&”用于增加特异性/优先级。

对我来说，'&&' 解决了我的问题，我不认为它搞砸了任何事情。

但是，我仍然想知道为什么或为什么不是使用这种方法的好习惯？使用“&&”有什么缺点吗？**

标签： cssreactjssassmaterial-ui

解决方案

为了使类工作，您必须makeStyles像这样使用该实用程序：

import { Avatar } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "128px",
    height: "128px",
    margin: theme.spacing(1),
  }
}));

export default function App() {
  const classes = useStyles();
  return (
      <Avatar classes={{ root: classes.root }} />
  );
}

这是一个工作示例：https ://codesandbox.io/s/friendly-chatterjee-w507i

通常，您不应该使用双 & 语法来自定义 Material UI 的组件。但是要回答您的问题，它用于增加/加倍特异性。有一篇很棒的文章解释了这一点： https ://dev.to/magischerzwerg/double-ampersand-trick-in-sass-with-react-4khe

推荐阅读