在材质 ui usestyles 中使用兄弟组合器

Posted 2023-02-22

【中文标题】在材质 ui usestyles 中使用兄弟组合器

【英文标题】：Using a sibling combinator in material ui usestyles

【发布时间】：2020-04-07 05:32:45

【问题描述】：

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

标准的css是：

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

这是我在材质ui上的尝试。

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

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

【参考方案1】：

$ 是在引用另一个规则名称（本例中为“b”）时使用的字符。你可以找到这个记录在案的here。 #b 是用于匹配 id 为“b”的元素的 CSS 语法。

下面是一个工作示例。

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);