I am in the process of learning React while following along a tutorial, I ran into a problem than I can't seem to get around. I am loading the .css file in my index.js file; however, the css is not being applied. The css file does exist and is in the correct location. In fact, when the web page is up, making a change to the css file triggers a page update (so I know it's being loaded).
My index.js:
import React from "react";
import ReactDOM from "react-dom";
import Main from "./main";
import "./index.css";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
index.css:
body {
background-color: yellow;
padding: 20px;
margin: 0;
}
h1, h2, p, ul, li {
font-family: sans-serif;
}
ul.header li {
display: inline;
list-style-type: none;
margin: 0;
}
ul.header {
background-color: #111;
padding: 0;
}
ul.header li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
padding: 20px;
display: inline-block;
}
.content {
background-color: #FFF;
padding: 20px;
}
.content h2 {
padding: 0;
margin: 0;
}
.content li {
margin-bottom: 10px;
}
main.js:
import React, { Component } from "react";
import {Route,NavLink,HashRouter} from "react-router-dom";
import Home from "./home";
import Stuff from "./stuff";
import Contact from "./contact";
class Main extends Component {
render() {
return (
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
);
}
}
export default Main;
Using different browsers, clearing cache, etc. not solving the problem. Thanks for any help.
Found the issue. I copied the styles from the website which created a weird hidden character in front of the style properties. Removed those characters and all worked as designed.
Related
Am trying Electron and React, so i have encountered with an issue using React's ImageGallery component by putting "react-image-gallery": "^1.2.7" in package.json
There is a wrapper root and two blocks inside. the first block is the green bar. the second block is an Image Gallery.
The problem is: when the window size is reduced by moving the bottom border up so the bottom border overlap the second block (image gallery), so the half Image and thumbs are lost.
Notice: height of the lost area the same as the height of the first block h1=h2. If the height of the green block is close to 0 then there is no problem.
Could anyone assist with it?
See github repo or code below:
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
const Hello = () => {
var images = [
{
original: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
thumbnail: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
},
{
original: 'https://source.unsplash.com/NQSWvyVRIJk/800x599',
thumbnail: 'https://source.unsplash.com/NQSWvyVRIJk/800x599',
},
]
return (
<div>
<div className="comp1"/>
<ImageGallery
thumbnailPosition={"bottom"}
useBrowserFullscreen={false}
showPlayButton={false}
showNav={true}
showIndex={true}
items={images}
/>
</div>
);
};
export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Hello />} />
</Routes>
</Router>
);
}
/** #NOTE: Prepend a `~` to css file paths that are in your node_modules*/
/** See https://github.com/webpack-contrib/sass-loader#imports*/
* {
box-sizing: border-box !important;
}
html, body {
height: 100%;
}
body {
font-size: 0.85em;
font-family: 'Roboto', sans-serif;
margin: 0;
}
#root {
min-height: 100%;
display: flex;
flex-direction: column;
}
.comp1 {
height: 50px;
background-color: yellowgreen;
}
I used the webpack create-react-app with npx. I have a component I saved in the src directory, header.css, and Header.js. It seems that the css file is not working as intended, it is not styling my component. I have the following component structure.
header.css:
.header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
padding: 1em;
margin-bottom: 2em;
background-color: rgb(192,45,26);
color: #fff;
}
Header.js:
import React from 'react';
import './header.css';
function Header()
{
return (
<div>
<h1>VACCINE</h1>
</div>
);
}
export default Header;
Any help would be appreciated, I followed the following thread but it didn't seem to work:
CSS modules not working for react version 16.6.0
You've successfully imported the css file, which is step 1. Step 2 is actually using the styles found within. Just apply a class to your div header:
import React from 'react';
import './header.css';
function Header()
{
return (
<div className="header">
<h1>VACCINE</h1>
</div>
);
}
export default Header;
I have a Person folder with the files:
Person.js
Person.module.css
In the css module file I have the class
.Person {
width: 60%;
margin: 16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding: 16px;
text-align: center;
}
Then in the Person.js file I have
import React from 'react';
import Radium from 'radium';
import classes from './Person.module.css';
const person = (props) => {
const style = {
'#media(min-width: 500px)': {
width: '450px'
}
}
return (
<div className={classes.Person}>
<p onClick={props.click}>I'm {props.name}! and I am {props.age} years old!</p>
<p>{props.children}</p>
<input type="text" onChange={props.changed} value={props.name}/>
</div>
)
};
export default Radium(person);
Finally in the app component I import the Person component and render it.
My problem is that the css class is not applied, when I inspect the DOM, the Person div doesn't have a class
Not sure what I'm doing wrong
I think the problem was that I created the app using the command
create-react-app css-module-test --scripts-version 1.1.5
And the old script version meant the css modules feature was not available
I have a simple React App, using Redux's Provider to wrap my App component.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';
const MainContainer = styled.div`
margin: 0;
padding: 0;
height: 100vh;
background-color: red;
`;
ReactDOM.render(
<MainContainer>
<Provider store={store}>
<App />
</Provider>
</MainContainer>,
document.getElementById('root'),
);
registerServiceWorker();
However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?
That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.
body {
margin: 0;
padding: 0;
}
You can do this with injectGlobal.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs
In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.