JSS 中的简单选择器和嵌套选择器

Posted 2023-02-22

【中文标题】JSS 中的简单选择器和嵌套选择器

【英文标题】：Simple selector and nested selector in JSS

【发布时间】：2020-02-08 02:51:02

【问题描述】：

我目前正在培训 ReactJS。我正在使用 material-ui 和 JSS（对我来说完全是新的）。

我不明白如何简单地选择我的 H6 元素或我的 H6 子元素 (dangerStyle)。

有什么想法吗？

谢谢！

myJss.js

const myJss = theme => (
    textCenter : 
        textAlign:'center'
    ,
    dangerStyle: 
        fontWeight:'normal',
        color:"#FF0000"
    ,
    h6: 
        color:"#00FF00",
        "&.dangerStyle" : 
            fontWeight:'bold',
        
    

);
export default myJss;

app.js

import React,  Component  from 'react'
import  withStyles  from "@material-ui/core/styles";
import Danger from 'components/danger'
import myJss from 'assets/jss/myJss.js';

class App extends Component 

    constructor (props) 
        super(props)
    

    render () 
        const  classes  = this.props;
        return (
            <div>
                APP
                <h6>
                    <Danger>Error occured</Danger>
                </h6>
            </div>
        )
    

export default withStyles(myJss)(App)

danger.js

import React from "react";
import  makeStyles  from "@material-ui/core/styles";
import myJss from 'assets/jss/myJss.js';
const useStyles = makeStyles(myJss);

export default function Danger(props) 
    const  children  = props;
    const classes = useStyles();
    return (
        <div className=classes.dangerStyle>
            children
        </div>
    );

【问题讨论】：

那输出的是什么 css？你看到h6 .dangerStyle 条目了吗？如果是这样，那么您应该能够做到<div className="dangerStyle">

@DavinTryon：使用 makeStyles 编译的 Jss。 h6 .dangerStyle 不能工作。

【参考方案1】：

样式对象中的每个键都将用于生成 CSS 类。像h6 这样的键不针对h6 标记，它只允许您将classes.h6 引用为类似于classes.dangerStyle 的类。

为了使 dangerStyle 类嵌套在 h6 标记中时表现不同，您可以执行以下操作：

Danger.js

import React from "react";
import  makeStyles  from "@material-ui/core/styles";
const useStyles = makeStyles(
  dangerStyle: 
    fontWeight: "normal",
    color: "#FF0000",
    "h6 &": 
      color: "#00FF00",
      fontWeight: "bold",
      fontSize: 24
    
  
);

export default function Danger(props) 
  const  children  = props;
  const classes = useStyles();
  return <div className=classes.dangerStyle>children</div>;

index.js

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

import Danger from "./Danger";
function App() 
  return (
    <div className="App">
      <Danger>Danger not in h6</Danger>
      <h6>
        <Danger>Danger in h6</Danger>
      </h6>
    </div>
  );


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

相关答案和文档：

jss-plugin-nested documentation Using material ui createStyles Advanced styling in material-ui In Material UI, How can I override a selector selected component style? how to use css in JS for nested hover styles, Material UI Using createMuiTheme to override default styles on div's, p's, body

【讨论】：

谢谢！ “h6 &”是解决方案。当您习惯 CSS 时，它会发生变化……这是唯一现有的解决方案？以及如何使用 JSS 定位一个简单的 html 标记（h1、...、h6、p 等...）（添加特定类...除外）？

一般来说，JSS 的想法是避免使用任何全局样式（如果您直接定位标签，就会有这种样式），但它确实支持全局样式：***.com/questions/56448538/…

好的，@global 是解决方案...我注意避免使用任何全局样式 :) 非常感谢！

通常是父级具有级联到子级的“上下文”。在这种情况下，孩子绑定了父母。 h6.dangerChild ELEMENT 其中ELEMENT 对其祖先一无所知（应该如此）似乎是一种更好的架构方法。这似乎不可能。是吗？

【参考方案2】：

在JSS中实现CSS嵌套规则

'& $selector'

例如：

'&$dangerStyle' : 
  fontWeight:'bold',