We Keep Coding

React Component CSS not toggling component styles

I'm creating a React Notes App with the feature to switch between Dark/Light Mode.
So basically I've written a React Toggle to switch between Dark and Light Mode.
But apparently the code is only switching the background and h1 color and not switching the notes color as I want .
Apparently the component color doesn't seem to change.
Toggle.js toggles the classname between 'theme-dark' and 'theme-light' and in turn toggles the CSS too. But it doesn't seem to change the CSS of notes component.
Toggle.js:
import React, { useEffect, useState } from 'react';
import '../index.css';
import { setTheme } from '../theme';
import { MdDarkMode, MdOutlineDarkMode } from 'react-icons/md'
function Toggle() {
const [ togClass, setTogClass ] = useState('dark');
let theme = localStorage.getItem('theme');
const handleOnClick = () => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
setTogClass('light')
} else {
setTheme('theme-dark');
setTogClass('dark')
}
}
useEffect(() => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTogClass('dark')
} else if (localStorage.getItem('theme') === 'theme-light') {
setTogClass('light')
}
}, [theme])
return (
<div className="container--toggle"> {
<button
id="toggle"
className={"toggle--button "+togClass}
onClick={handleOnClick}
>
{togClass === 'light' ? <MdOutlineDarkMode size='1.5rem' /> :
<MdDarkMode size='1.5rem'/>}
</button>
}
<label htmlFor="toggle" className="toggle--label">
<span className="toggle--label-background"></span>
</label>
</div>
)
}
export default Toggle
theme.js
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function keepTheme() {
if (localStorage.getItem('theme')) {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-light')
}
} else {
setTheme('theme-dark')
}
}
export {
setTheme,
keepTheme
}
I'm certain the React Toggle.js works fine. Do note that I'm a newbie in CSS Variables ( you can probably tell ) and I think that's where the code messes up.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.theme-light {
--dark-text: black;
--light-text: #5E4B56;
--dark-background: #FFCFDF;
--light-background: #FFCFDF;
--accent: #DBE7E4;
--button-border: #5E4B56;
--note: #E0F9B5;
--note-new: #A5DEE5;
}
.theme-dark {
--dark-text: #EEEEEE;
--light-text: #F9F8F8;
--dark-background: #222831;
--light-background: #586F7C;
--accent: #B8DBD9;
--button-border: #B8DBD9;
--note: #EEEEEE;
--note-new: #00ADB5;
}
#root {
background-color: var(--dark-background);
color: var(--dark-text);
}
.toggle--button {
cursor: pointer;
}
.toggle--button.dark {
border: none;
--dark-background: #222831;
background-color: var(--dark-background);
}
.toggle--button.light {
border: none;
background-color: var(--dark-background);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
textarea {
color: var(--dark-text);
border: none;
resize: none;
background-color: var(--note-new);
}
textarea:focus {
outline: none;
}
.save {
size: 10rem;
background-color: #e1e1e1;
border: none;
border-radius: 15px;
padding: 5px 10px 5px 10px;
}
.save:hover {
background-color: #ededed;
cursor: pointer;
}
.note {
color: var(--dark-text);
background-color: var(--note);
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}
.note-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.notes-list {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
);
}
.note.new {
background-color: var(--note-new);
}
.delete-icon {
cursor: pointer;
}
.search {
display: flex;
align-items: center;
background-color: rgb(233, 233, 233);
border-radius: 10px;
padding: 5px;
margin-bottom: 1.5em;
}
.search input {
border: none;
background-color: rgb(233, 233, 233);
width: 100%;
}
.search-icons {
color: black;
}
.search input:focus {
outline: none;
}
Light Mode:
Dark Mode:
I want the dark mode to switch colors of notes from light mode ones.
This is how I want it to look:

Error on my side, my App.js file had classname set to theme-light which prevented overriding.

Style Element Inside of Component with CSS and React.js

I am trying to make a button that allows the user to switch between light and dark theme. The method I am using is to change the className of my App div. All of the other components in my project are inside of the App component. Then in the individual CSS files for the components I first select the className of the App div which is either .light or .dark. Then I write the name of the component that I want to set a theme color to. For example:
.light p {
background-color: white;
}
However, this doesn't work.
Here are some of the files:
/*App.js*/
import { useState } from "react";
import TaskPage from "./pages/taskPage";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { library } from "#fortawesome/fontawesome-svg-core";
import { MainContextProvider } from "./store/MainContext";
library.add(fas);
function App() {
const [theme, setTheme] = useState("light");
const switchTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<MainContextProvider>
<div className={`App ${theme}`}>
<div className="pageTop">
<h1 className="title">Task Board</h1>
</div>
<button className="button" onClick={switchTheme}>
Change theme
</button>
<TaskPage />
</div>
</MainContextProvider>
);
}
export default App;
/*index.css*/
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap");
.App {
overflow-x: hidden;
padding-bottom: 40px;
height: 100%;
width: 100%;
}
.light {
background-color: #fcfcfc;
}
.dark {
background-color: #181A1B;
}
.title {
font-family: "Roboto", sans-serif;
font-size: 50px;
font-weight: 700;
text-align: center;
margin-top: 40px;
text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}
.light .title {
color: black;
}
.dark .title {
color: white;
}
.pageTop {
margin-bottom: 50px;
}
/*todo.module.css*/
.taskCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 340px;
height: 260px;
min-width: 340px;
min-height: 260px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border-radius: 12px;
padding: 14px;
box-sizing: border-box;
}
.light .taskCard {
background-color: white;
}
.dark .taskCard {
background-color: #2B2E30;
}
I used this sandbox as an example: https://codesandbox.io/s/stupefied-jackson-0ynz6?file=/src/App.js
I am a beginner with React.js

css - how to make flex-item resize with 1:1 ratio and the flex-container padding-left and padding-right is always the same

When I resize the window,
the flex-container has different padding-left and padding-right which is not satisfactory.
Therefore, I want to make the flex-item can resize when the window size change, given that the container with the (almost)same padding-left and padding-right and the flex-item maintain 1:1 ratio.
Is it possible? Or is there any other way to make it less ugly when resizing?
App.js
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [list, setList] = useState([
{ id: 1, fileName: "file 1" },
{ id: 2, fileName: "file 2" },
{ id: 3, fileName: "file 3" },
{ id: 4, fileName: "file 4" },
{ id: 5, fileName: "file 5" },
{ id: 6, fileName: "file 6" }
]);
return (
<div className="App">
<div className="layout__container">
<div className="list">
{list.map((li) => {
return (
<figure title={li.fileName} key={li.id} className={"list__item"}>
<div className="list__item__file">
<div className="list__item__file__name">{li.fileName}</div>
</div>
</figure>
);
})}
</div>
</div>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.layout__container {
width: 100%;
padding: 3rem 2rem 2rem 2rem;
text-align: left;
border: 1px solid black;
}
.list {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex-grow: 1;
}
.list .list__item {
position: relative;
width: 100px;
height: 100px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: white;
border: 1px solid white;
overflow: hidden;
flex: 0 0 auto;
}
.list .list__item img {
max-height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
background-color: #c3c4c7;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
overflow: hidden;
width: 100%;
height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
overflow: hidden;
font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
color: #8c8f94;
font-size: 0.625rem;
text-transform: uppercase;
margin: 0 auto;
}
CodeSandbox:
https://codesandbox.io/s/young-brook-o83f2?file=/src/App.js

You need to correct the box-sizing of all your elements to border-box. Then you just need to remove margins from the list__item and change the justify-content in the .list to center. Here is the code: https://codesandbox.io/s/6p2vh

Fixing react-responsive-carousel display on mobile

I'm still a beginner with ReactJS and I need to create a Carousel that is responsive, the way I need to leave is like this:
I was able to create Carousel on both desktop and responsive using the react-responsive-carousel library.
The problem is that in the mobile format, when I pass the slides of each Carousel, the expected behavior is not happening. When I click to show the next slide, in Carousel it still shows the current slide, and just a piece of the next slide.
It is easier to explain by showing a short gif I made, notice what happens when I click to show the next slide.
When it is in the desktop format, Carousel works the right way, I also created a small gif to show it.
Can you tell me what you’re doing wrong so that Carousel is working that way?
import React from "react";
import PropTypes from "prop-types";
import "./carousel.scss";
import { Carousel as CarouselLib } from "react-responsive-carousel";
import { CAROUSEL_ITEMS } from "./Carousel.utils";
const Carousel = ({ subtitle, testID, title }) => {
const items = React.useMemo(
() =>
CAROUSEL_ITEMS.map((item) => (
<div key={item.id}>
<div className="images">
<img className="image" src={item.url} alt="" />
</div>
<div className="infos">
<h3>{item.title}</h3>
<span>{item.subtitle}</span>
</div>
</div>
)),
[]
);
return (
<div data-testid={`${testID}_Container`} className="carousel-container">
<div className="carousel-header">
<h5>{subtitle}</h5>
<h3>{title}</h3>
</div>
<div className="carousel-content">
<CarouselLib
centerMode
showStatus={false}
dynamicHeight={false}
emulateTouch
swipeScrollTolerance={50}
centerSlidePercentage={30}
showThumbs={false}
infiniteLoop
showIndicators
renderArrowPrev={(onClickHandler, hasPrev, label) =>
hasPrev && <div />
}
renderArrowNext={(onClickHandler, hasNext, label) =>
hasNext && (
<button
type="button"
onClick={onClickHandler}
className="custom-arrow"
data-testid={`${testID}_Button_Next`}
/>
)
}
>
{items}
</CarouselLib>
</div>
</div>
);
};
Carousel.propTypes = {
subtitle: PropTypes.string,
testID: PropTypes.string.isRequired,
title: PropTypes.string
};
Carousel.defaultProps = {
testID: "Carousel",
subtitle: "READ OUR CLIENT",
title: "CASES"
};
export default Carousel;
.carousel {
&-container {
.images {
background-color: #fff;
width: 100%;
max-width: 416px;
height: 280px;
.image {
width: 100%;
height: auto;
background-position: center center;
background-repeat: no-repeat;
}
#media (max-width: 600px) {
max-width: 270px;
height: auto;
}
}
.infos {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
h3 {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 2.5rem;
letter-spacing: normal;
font-style: normal;
font-weight: normal;
font-stretch: normal;
margin: 24px 0 20px 0;
#media (max-width: 600px) {
font-size: 1.5rem;
}
}
span {
font-family: Alliance2;
color: #000;
line-height: 0.76;
font-size: 1rem;
letter-spacing: normal;
font-style: normal;
font-weight: 500;
font-stretch: normal;
text-transform: uppercase;
margin-bottom: 30px;
#media (max-width: 600px) {
font-size: 0.625rem;
}
}
}
.carousel {
.slide {
background-color: transparent !important;
#media (max-width: 1024px) {
min-width: 50% !important;
}
#media (max-width: 600px) {
min-width: 90% !important;
}
}
.control-dots {
.dot {
border-radius: 0 !important;
background-color: #000 !important;
width: 33px !important;
height: 3px !important;
box-shadow: none !important;
opacity: 1 !important;
&.selected {
height: 7px !important;
}
&:focus {
outline: none !important;
}
}
}
}
}
&-header {
color: #000;
font-family: 'Alliance2';
font-weight: 300;
margin: auto;
max-width: 1300px;
text-transform: uppercase;
#media (max-width: 960px) {
align-items: center;
display: flex;
flex-direction: column;
}
h5 {
font-size: 1rem;
font-weight: bold;
margin: 0;
}
h3 {
height: 80px;
margin-top: 13px;
margin-bottom: 44px;
color: #000;
font-size: 3.5rem;
line-height: 1.04;
letter-spacing: -1.1px;
#media (max-width: 960px) {
font-size: 1.87rem;
}
#media (max-width: 600px) {
margin-bottom: 0;
}
}
}
&-content {
margin: auto;
max-width: 1440px;
width: 100%;
.custom-arrow {
position: absolute;
top: 7em;
bottom: auto;
right: 4.3em;
background-color: transparent;
border: none;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
width: 67px;
height: 67px;
transform: rotate(225deg);
cursor: pointer;
&:focus {
outline: none !important;
}
}
}
}
Thank you very much in advance for any help/tip.

I don't know react-responsive-carousel , I'm using react-slick (here) in my projects and I never had a problem with the responsive.

I had a similar trouble with this lib, i solved the mobile question adding a few lines of CSS to the main div of my Carousel component:
#media only screen and (max-width: 600px) {
.carousel-wrapper{
max-width: 100%;
}
}

alignment not working in react for footer

I am trying to get a footer properly but I can't get the result, I expect
here is what I expect to have:
below is what I have:
The copyright text is lost somewhere on the right. You can't see it as background is white.
here is the code:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '#fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
and the css
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
Any idea How to properly center everything and make sure I have 2 lines.
Thanks

The copyright text is lost somewhere on the right. You can't see it as
background is white
Its because .container has position: absolute
You can put copyright div inside container (and apply necessary changes to make it appear below .navbar) or get rid of position: absolute
Any idea How to properly center everything and make sure I have 2
lines.
As you are using display: flex there are two properties which allow you to align stuff in vertical/horizontal way justify-content, align-items ( they depend on flex-direction though )

Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.
Or manually add these styles to a .container selector
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}