在 material ui 使用样式中使用兄弟组合器

Question

我正在尝试使用 material ui 更改一个 div 在另一个悬停时的背景。

标准css是：

#a:hover ~ #b {
   background: #ccc;
}

这是我在 material ui 中的尝试。

const useStyles = makeStyles(theme => ({
a: {
  background:'#fff',

},
b: {
    background:'#fff'
    '&:hover ~ #a': {
       background:'#eee'
    }
}));

Answer 1

$ 是引用另一个规则名称时使用的字符（在本例中为 "b"）。您可以找到此文档 here。 #b 将是 CSS 语法，用于匹配 id 为 "b" 的元素。

下面是一个工作示例。

import React from "react";
import ReactDOM from "react-dom";

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

const useStyles = makeStyles({
  a: {
    "&:hover ~ $b": {
      backgroundColor: "#ccc"
    }
  },
  b: {}
});
function App() {
  const classes = useStyles();
  return (
    <div>
      <div className={classes.a}>This is a</div>
      <div className={classes.b}>This is b</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在 material ui 使用样式中使用兄弟组合器

Using a sibling combinator in material ui usestyles

javascript

reactjs

material-ui

jss