Right now I made another component that is on a new window called Blog.js. In-line styling is convenient but eventually it will get crowded and annoying to edit. I want to make another stylesheet called blog.css but when I style in it, it styles App.js component instead. EDIT: just adding the rest of my code, I didn't want to add the blog.module.css because it only has a few styles (h2 with color and styling change).
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
In the blog.css file I just wanted to style the h2 tag from Blog.js to make it red and italic but like I said before it styles the h2 tag in App.js even though I already have it styled in index.css.
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();
