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
Related
I have created two boxes, one with the css module scheme and the other with styled-components. However, the transition will fail on the box created with styled-components, but not on the box created with the css modules scheme.
I have added a button to demonstrate the difference.
import React, { useState } from "react";
import styled from "styled-components";
import "./App.css";
const App = () => {
const [boxHeight, setBoxHeight] = useState(20);
const Box = styled.div`
border: 2px solid black;
height: ${boxHeight}px;
padding: 0 2rem;
width: 4rem;
transition: all 3s linear;
`;
return (
<div>
<div
className="box"
style={{ border: "2px solid black", height: `${boxHeight}px` }}
>
box 1
</div>
<Box>box 2</Box>
<button onClick={() => setBoxHeight(boxHeight + 100)}>+100</button>
</div>
);
};
/* App.css */
.box{
border: 2px solid black;
padding: 0 2rem;
width: 4rem;
transition: all 2s linear;
}
My guess is that when the style of a component created by styled-components changes, the component is destroyed and a new one is created with the changed style, rather than just modifying the component.
I wonder if there is any good solution to use transition through styled-components .
Thanks to my colleague, now I know that I should create the component created by styled-components outside of another component. If it is created inside the component, it will be recreated every time it is rendered.
import React, { useState } from "react";
import styled,{css} from "styled-components";
import "./App.css";
const Box = styled.div`
${props=>css`
height: ${props.height}px;
`}
border: 2px solid black;
padding: 0 2rem;
width: 4rem;
transition: all 3s linear;
`;
const App = () => {
const [boxHeight, setBoxHeight] = useState(20);
return (
<div>
<div
className="box"
style={{ border: "2px solid black", height: `${boxHeight}px` }}
>
box 1
</div>
<Box height={boxHeight}>box 2</Box>
<button onClick={() => setBoxHeight(boxHeight + 100)}>+100</button>
</div>
);
};
export default App;
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 two components, each with a CSS module:
src/_components/ProfileImage.tsx
import styles form './ProfileImage.module.scss';
function ProfileImage () {
return (
<img className={styles.profileImage} />
)
}
export default ProfileImage;
src/_components/ProfileImage.module.scss
.profileImage {
height: 50px;
width: 50px;
}
and
src/ProfilePage/Profile.tsx
import styles form './ProfilePage.module.scss';
function ProfilePage () {
return (
<ProfileImage className={styles.profileImage}
)
}
export default ProfilePage;
src/ProfilePage/Profile.module.scss
.profileImage {
composes: profileImage from '_components/ProfileImage.module.scss';
outline: 1px solid red;
}
This doesn't seem to work, not even when I use relative paths.
SCSS doens't recognise the property composes.
Is there a better way to compose modules than this? I am switching from CSS-in-JS to CSS modules, but I really miss how easy it was to compose components with emotion or styled-components.
in src/ProfilePage/Profile.module.scss
#import '/ProfileImage.module.scss' /* your ProfileImage scss file path */
.profileImage {
#extend .profileImage;
outline: 1px solid red;
}
this will work
I'm working off of the documents from the "Learn" section on the Next.js website.
The CSS below does not get applied to the component if using the jsx style tag; however, if I add the CSS as an object literal attribute it gets applied. How can I to get the jsx style tag CSS to be applied?
This won't be applied:
import Layout from "../components/Layout";
export default function Post() {
return (
<Layout>
<div className="container"> This is a div. <div/>
// This wont be applied
<style jsx>{`
.container {
margin: 20;
padding: 20;
border: "1px solid #DDD;
}
`}</style>
</Layout>
);
}
But this works:
import Layout from "../components/Layout";
const layoutStyle = {
margin: 20,
padding: 20,
border: "1px solid #DDD"
};
export default function Post() {
return (
<Layout>
<div className="container" style={layoutStyle}> This is a div. <div/>
</Layout>
);
}
When using the object attribute the unit is not supplied and the border field value is in quotes.
const layoutStyle = {
margin: 20,
padding: 20,
border: "1px solid #DDD"
};
For it to work with JSX CSS it needs to be normal CSS syntax!
.container {
margin: 20px;
padding: 20px;
border: 1px solid #DDD;
}
Try this:
<style>{`
.container {
margin: 20;
padding: 20;
border: 1px solid #DDD;
}
`}</style>
This is not a good approach if you are using the next js on your website. You should use the next css in your project that is so easy to use and maintain your CSS files as well.
Here is a documentation link to use next css.
https://github.com/zeit/next-plugins/tree/master/packages/next-css
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.