【发布时间】：2021-11-11 03:58:51
【问题描述】：
因此，为了设计我制作的这个新组件的样式，我尝试将其包装在 <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;
}
我想在 Blog.js 中设置 h2 标签的样式，但由于某种原因，它总是会与 App.js 发生冲突：
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> //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
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
Blog.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
【问题讨论】：
-
请完成您问题的第一句话。您能否在codesandbox 或通过 github 链接分享您的完整配置示例？
-
这里是代码框链接codesandbox.io/s/kptkr 我要做的就是在我的 Blog.js 组件中使用样式表。
标签： javascript css reactjs