【发布时间】：2021-12-15 21:54:56
【问题描述】：
现在我在一个名为Blog.js 的新窗口中创建了另一个组件。内嵌样式很方便，但最终会变得拥挤且难以编辑。我想制作另一个名为blog.css 的样式表，但是当我在其中设置样式时，它会改为样式App.js 组件。编辑：只是添加我的其余代码，我不想添加blog.module.css，因为它只有几个样式（h2 带有颜色和样式更改）。
App.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>
<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 /> //want to style this component
</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 Alex </p>
</footer>
</body>
)
}
}
export default App
在blog.css 文件中，我只是想为Blog.js 中的h2 标签设置样式，使其变为红色和斜体，但就像我之前所说的那样，它在App.js 中设置了h2 标签的样式，即使我已经在@ 中设置了样式987654329@.
Blog.js：
import React from "react"
import { Component } from "react";
import BlogCSS from '../components/Blog.module.css'; //clashes with App.js for some reason
class Blog extends Component {
render() {
const myStyle = {
fontStyle: 'italic',
fontWeight: 'lighter',
color: 'red',
paddingLeft: 450,
position: 'relative',
fontSize: 50
}
const scrim = {
backgroundColor: 'black'
}
const woah = {
lineHeight: 1.5,
fontSize: 20
}
return (
<body>
<header>
<div style={scrim}className="background">
<h2 style={myStyle}>Welcome to my Blog!</h2> //want to style this tag
</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>
</body>
)
}
}
export default Blog
NewWindowComponent.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
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
【问题讨论】：