javascript - 是否有在本地设置不同组件样式的修复程序？

问题描述

因此，为了设计我制作的这个新组件的样式，我尝试将它包装在 a 中<div>，我尝试过内联样式（这是唯一有效但会变得混乱的样式），我尝试过 css 模块，我也尝试过配置 webpack.config.js 文件，似乎没有任何效果。在配置文件中，我无法真正更改它，因为它看起来与 (test: /.css$/,) 不同，这就是它的样子：

{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),
},

由于某种原因，与将样式导入文件有关的任何事情都不起作用。如果我以某种方式让它工作，它仍然会与我的 App.js 组件发生冲突。

博客.css：

h2 {
  font-style: italic;
  color: red;
  font-weight: lighter;
  text-align: center;
  position: relative;
  font-size: 50px;
}

我想h2在 Blog.js 中设置标签的样式，但由于某种原因，它总是会与 App.js 发生冲突：

应用程序.js：

import React from "react";
import { Component } from "react";
import fbook from "./image/fbook.png";
import insta from "./image/insta.png";
import tweet from "./image/tweet.png";
import me from "./image/itsme.png";
import Blog from "./components/Blog.js";
import NewWindowComponent from "./NewWindowComponent";




class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isNewWindow: false
    }

    this.handleChange = this.handleChange.bind(this)

    this.handleClick = this.handleClick.bind(this)
  }



  handleChange (event) {
    const {name, value} = event.target
    this.setState({name: value})
  }

  handleClick () {
    this.setState({
      isNewWindow: true
    })
  }



  render() {
    return (
      <body>
        <header>
          <h2>ALEX</h2> //clashes with this h2 tag instead
          <div className='nav'>
            <a href="#">ALL</a>
            <a href="#">TRAVEL</a>
            <a href="#">LIFESTYLE</a>
            <a href="#">MUSIC</a>
            <a href="#">VIDEO</a>
          </div>

          <div className="search-box">
            <input type="text"
              className="search-bar"
              name="stuff"
              onChange={this.handleChange}
              value={this.state.value}
              placeholder="Search"
            />
          </div>
        </header>

        <div id="background">
          <div className= "container">
            <h1>HI! I AM ALEX!</h1><hr/>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
            <NewWindowComponent
              onClose={this.state.isNewWindow}>
              <Blog />
            </NewWindowComponent>

            <button onClick= {this.handleClick}>GO TO BLOG</button> 
            <img className= "my-pic" src={me} alt="pic of me"/> 
          </div>
        </div>

        <footer>
          <div className="icons">
            <img className ="f-book" src={fbook} alt="Facebook"/>
            <img className ="tweet" src={tweet} alt="Twitter"/>            
            <img className ="insta" src={insta} alt="Instagram"/>
          </div>

          
          <p>© 2021, Designed by not finished </p>
        </footer>
      </body>
    )
  }
}

export default App

新窗口组件.js：

import { Component } from "react";
import ReactDOM from 'react-dom';

class NewWindowComponent extends Component {
  containerEl = document.createElement('div');
    
  externalWindow = null;
    
  componentDidMount() {
    this.externalWindow = window.open('', 'NewWindowComponent');
  
    if (this.externalWindow) {
      this.externalWindow
        .document
        .body
        .appendChild(this.containerEl);
      this.externalWindow.onunload = () => this.props.onClose();
      }
    }
  
    render() {
      return ReactDOM.createPortal(this.props.children, this.containerEl);
    }
  }

  export default NewWindowComponent

博客.js：

import React from "react"
import { Component } from "react";
import "../components/Blog.css";

class Blog extends Component {
    constructor(props) {
        super(props)
        this.state = {
          
        }
       
    }


  render() {
    const myStyle = {
      fontStyle: 'italic',
      fontWeight: 'bold',
      color: 'red',
      textAlign: 'center',
      position: 'relative',
      fontSize: 20
    }

    const scrim = {
      backgroundColor: 'black'
    }

    const woah = {
      lineHeight: 1.5,
      fontSize: 20
    }

    return (
      <body>
        <div className = "cool">
            <header>
                <div style={scrim}className="background">
                <h2>Welcome to my Blog!</h2>
                </div>
            </header>

            <div id="background">
            <div className= "container">
            <h2>About me I guess...</h2><hr/>
            <p style={woah}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.           </p>
            </div>
            </div>
        </div>
      </body>
    )
  }
}
export default Blog

标签： javascriptcssreactjs

解决方案

CSS 对文档来说是全局的。Blog.css我想你只需要在你的文件中增加 CSS 选择器的特殊性。

给定Blog组件代码：

class Blog extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const scrim = {
      backgroundColor: "black"
    };

    const woah = {
      lineHeight: 1.5,
      fontSize: 20
    };

    return (
      <body>
        <div className="cool">
          <header>
            <div style={scrim} className="background">
              <h2>Welcome to my Blog!</h2>
            </div>
          </header>

          <div id="background">
            <div className="container">
              <h2>About me I guess...</h2>
              <hr />
              <p style={woah}>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
              </p>
            </div>
          </div>
        </div>
      </body>
    );
  }
}

没有

在这里，Blogg.css CSS 正在“泄漏”并影响文档的其余部分。

使用更具体的选择器

div您可以使用类名定位作为的后代的元素"cool"。

索引.css

.App {
  font-family: sans-serif;
  text-align: center;
}

博客.css

.cool h2 {
  font-style: italic;
  color: red;
  font-weight: lighter;
  text-align: center;
  position: relative;
  font-size: 50px;
}

javascript - 是否有在本地设置不同组件样式的修复程序？

问题描述

解决方案

没有

使用更具体的选择器

推荐阅读