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;
Related
I am using the Swiper.js package in a react app to make a simple carousel slider. My app has a global setting for overflow-x: hidden which I need and for some reason its causing the Swiper to only render the first image.
I have ensured overflow: visible on all affected elements but this has not changed it. I have tried a the most basic example as well and same issue.
I have tried previous versions but then got module import errors so just hoping someone has an answer for me. Brain is wrecked over this:(
I just want a simple image carousel using the swipe.js package.
Here is the code and a gif to better show the problem:
import React from "react";
import "./projectslider.scss";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Thumbs } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
function ProjectsSlider(props) {
return (
<>
<div className="sliderProjects">
<Swiper
loop={false}
spaceBetween={10}
navigation={true}
modules={[Navigation, Thumbs]}
grabCursor={true}
className="projectsSlider"
>
{props.images.map((item, index) => (
<SwiperSlide key={index} className="swiperSlide">
<img src={item} alt="slider images"></img>
</SwiperSlide>
))}
</Swiper>
</div>
</>
);
}
export default ProjectsSlider;
CSS:
.sliderProjects {
width: 70%;
height: 70%;
overflow: visible;
.projectSlider {
overflow: visible;
width: 90%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
.swiperSlide {
overflow: visible;
img {
overflow: visible;
height: 20vh;
width: 20wh;
}
}
}
}
My react file isn't picking up my external styles.css
index.js :
import React from "react";
import ReactDOM from "react-dom";
import "./css/styles.css";
ReactDOM.render(
<div>
<h1 className="upper-deck"> Hello world </h1>
</div>,
document.getElementById("root")
);
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
.upper-deck {
font-size: "90px";
}
Project folder format :
Don't use quotes for scaler values in CSS. Remove the quotes around the pixel value for the font size.
.upper-deck {
font-size: 90px;
}
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 am using styled components and Material UI and I can't figure out how to add on hover styles the MuiButton children. I've searched online and followed some of the docs, but I cannot seem to get it to take. I have my jsx setup like so:
<StyledMuiButton onClick={() => ()}>
<Svg />
<MuiTypography color={Color.gray} variant="caption">
Text
</MuiTypography>
</StyledMuiButton>
and the styled component set up like so:
const StyledMuiButton = styled(MuiButton)`
&& {
& .MuiButton-label {
flex-direction: column;
}
&:hover ${MuiTypography} {
color: ${Color.primary};
}
}
`;
Can anyone point me in the correct direction
Here's an example showing a couple ways of targeting elements within a button:
import React from "react";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import DoneIcon from "#material-ui/icons/Done";
import styled from "styled-components";
const StyledButton = styled(Button)`
& .MuiButton-label {
display: flex;
flex-direction: column;
}
&:hover {
color: red;
.MuiSvgIcon-root {
background-color: blue;
}
.MuiTypography-root {
color: green;
&:nth-of-type(2) {
color: purple;
}
}
}
`;
export default function App() {
return (
<div className="App">
<Button>Default Button</Button>
<StyledButton>Styled Button</StyledButton>
<StyledButton>
<DoneIcon />
<span>Styled Button</span>
<Typography>Typography 1</Typography>
<Typography>Typography 2</Typography>
</StyledButton>
</div>
);
}
This leverages the global class names applied to the elements which are documented in the CSS portion of the API page for each component (for instance the Typography documentation is here: https://material-ui.com/api/typography/#css). As a general rule the top-most element within a Material-UI component can be targeted via MuiComponentName-root (e.g. MuiTypography-root for Typography).
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.