Question

在为具有更通用的“ li”元素标识符的每个列表项应用样式之后，我尝试为每个单独的列表项应用样式。这些元素目前仅应用了li样式，即使（我相信）React中className的更具体的选择器具有以下在SCSS样式表中定义的样式。

用于下拉式React Components的SCSS，其中包含li元素

& .dropdownUl {
      margin: $boxMargin;
      padding: $stdPad;
      float: left;
      position: relative;
      & li {
        padding: $stdPad;
        box-sizing: content-box;
        @include standard-1px-border;
        position: absolute;
        background: $linear-gradient-azn-nfx;

        &:hover {
          cursor: pointer;
          background: $netflix-red;
          color: $netflix-white;
        }
        &:active {
          background: darken($netflix-red, 10%);
        }

        & .dropdownLiTwo {
          top: 200px;
          background: black;
        }
        & .dropdownLiThree {
          top: 400px;
          background: black;
        }
      }
    }
  }  
}

以下是组件（下拉菜单）：

import React from "react";

export default class DropdownUlOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showListItems: false };
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter(e) {
    e.preventDefault();
    this.setState({
      showListItems: true
    });
  }

  handleMouseLeave(e) {
    e.preventDefault();
    this.setState({ showListItems: false });
  }

  render() {
    if (this.state.showListItems) {
      return (
        <React.Fragment>
          <ul className="dropdownUl" onMouseLeave={this.handleMouseLeave}>
            <h2 className="hoverOn">Home</h2>
            <li className="dropdownLiOne">Blog</li>
            <li className="dropdownLiTwo">UI & UX</li>
            <li className="dropdownLiThree">What you can expect</li>
          </ul>
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        <ul className="dropdownUl" onMouseEnter={this.handleMouseEnter}>
          <h2>Home</h2>
        </ul>
      </React.Fragment>
    );
  }
}

在此组件中呈现了哪些内容，scss的css导入到该组件中：

import React from "react";
import "../styles/header.css";
import DropdownUlOne from "./dropdownUlOne";
import DropdownUlTwo from "./dropdownUlTwo";
import DropdownUlThree from "./dropdownUlThree";

export default class Header extends React.Component {
  render() {
    return (
      <header className="header">
        <h1 className="appTitle">Ronnlid Websites</h1>
        <div className="dropdownDiv">
          <DropdownUlOne />
          <DropdownUlTwo />
          <DropdownUlThree />
        </div>
      </header>
    );
  }
}

谢谢您的帮助！

Answer 1

我可能误解了您的问题。但是，我认为您此处关于LI样式不适用的问题是因为&选择器就在它们之前，因此请尝试：

& .dropdownUl {
  margin: $boxMargin;
  padding: $stdPad;
  float: left;
  position: relative;
  li {
    padding: $stdPad;
    ....

scss的结构方式现在是针对具有您在ul上的类的li，例如：<li class="dropdownUl">

有条件地呈现React和SCSS中的列表项的特殊性问题

1 个答案: