Im trying to apply css style on specific component in React with css module.
When i run the app localy the styles work correctly, but for some reason when i deploy my app the style does not apply on the outer div, only his childs get the correct style.
why is that?
Her is the code:
// React component
import { ChatContext } from '../../../../contexts/ChatContext';
import classes from './Humburger.module.css';
import React, { useContext } from 'react';
const Humburger = () => {
const { show, setShow } = useContext(ChatContext);
return (
<div className={classes.Humburger} onClick={() => setShow(!show)}>
<span></span>
<span></span>
<span></span>
</div>
);
};
export default Humburger;
// CSS file
/*Here is the style which does not apply when i deploy my app*/
.Humburger {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
width: 35px;
height: 100%;
margin-left: 10px;
}
/*==========================================================*/
.Humburger > span {
display: inline-block;
height: 5px;
width: 100%;
border-radius: 5px;
background-color: #fff;
margin-top: 3px;
cursor: pointer;
}
.Humburger > span:first-child {
margin: 0;
}
Have you tried import './Humburger.module.css'; and className='Humburger' ?
Related
i am trying to create a flexbox with image in one pill and some text in another pill. here's the code i have written in react->
import NavbarTop from "../navbar/navbar";
import "./style.css";
import React from 'react';
function Home() {
return (
<>
<NavbarTop />
<div id="titleTextDiv" className="d-flex">
<div className="p-2 flex-fill">
<img className="titlePic" src="home/titleLogo.png" />
</div>
<div className="p-2 flex-fill">
<span className="titleText">Dumpster<br></br>Dive</span>
</div>
</div>
</>
);
}
export default Home;
style.css
#titleTextDiv {
margin-top: 30px;
text-align: center;
}
.titlePic {
height: 60px;
width: 80px;
}
.titleText {
text-align: justify;
font-size: 25px;
font-weight: bold;
}
but the flexbox isnt working. the text is displayed under the image for some reason. can someone guide me in right direction?
Do you have display: flex; set anywhere in this component? If not, then the css doesn't know to put it into a flexbox. Add the display: flex; to the #titleTextDiv and they should appear next to each other.
#titleTextDiv {
margin-top: 30px;
text-align: center;
display: flex;
}
.titlePic {
height: 60px;
width: 80px;
}
.titleText {
text-align: justify;
font-size: 25px;
font-weight: bold;
}
Blitz
I am unable to center elements that will be a list of blog posts going forward. The Postlist element is loaded into my App.js file. I was able to center the nav bar using the technique mentioned here under the Horizontally section and under the subsection titled Is there more than one block level element? but when I attempt to do the same technique on the list of blog posts, it doesn't work, bear in mind that the list of blog posts will be dynamic in the future.
PostList.css file:
.blog-list-container {
display: block;
text-align: center;
margin: 0 auto;
}
.blog-element {
display: block;
width: 50%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 30px;
padding-left: 30px;
}
And Postlist.js file:
import React from 'react';
import App from '../../App';
import './PostList.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Outlet,
useParams
} from 'react-router-dom';
const PostList = ( props ) => (
<div className="blog-list-container">
<Router>
<Link to={'/posts/${}'} className="blog-element">element 1</Link>
<Link to={'/posts/${}'} className="blog-element">element 2</Link>
<Link to={'/posts/${}'} className="blog-element">element 3</Link>
</Router>
</div>
);
export default PostList
There is a cleaner, shorthand alternative to some of the suggested:
.blog-element {
display: block;
width: 50%;
padding: 60px 30px;
margin: 0 auto;
}
but I would advise using flexbox though:
While looking at your code and what is mentioned you should consider D.R.Y. when writing components, example:
const PostList = (props) => (
<div className='blog-list-container'>
<Router>
{posts.map((post) => {
return (
<Link key={post.id} to={post.link} className='blog-element'>
{post.name}
</Link>
)
})}
</Router>
</div>
)
export default PostList
It is behaving exactly as you have set the css rules.
.blog-element {
display: block;
width: 50%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 30px;
padding-left: 30px;
margin: 0 auto; // will center it to your blog list container.
}
Although i would suggest that you set the max-width to the container and remove the width from blog element.
.blog-list-container {
text-align: center;
}
.blog-element {
display: block;
width: 50%;
padding: 60px 30px;
margin: 0 auto; // new line
}
Add this line only in your code
or Code like this
.blog-list-container {
text-align: center;
}
.blog-element {
display: block;
padding: 60px 30px;
}
I am trying to load a dynamic login page with React Modal. Is there a way to make React Modal resize to the size of its child elements?
//App.js
import "./styles/app.scss";
import Layout from './options/Layout'
import Login from './Components/Login'
import { useState } from "react";
import Modal from 'react-modal'
function App() {
const [OpenModal, setOpenModal] = useState(false)
return (
<div id="app" className="App">
<Layout>
<button onClick = {() => setOpenModal(true)}>open modal</button>
<Modal isOpen = {OpenModal}>
<Login/>
</Modal>
</Layout>
</div>
);
}
export default App;
//login.scss
.login {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 280px;
margin: 0 auto;
background-color: #5c8fc2;
border-radius: 30px;
}
.login_top {
display: flex;
align-items: center;
justify-content: center;
margin-top: -40px;
margin-bottom: 20px;
color: whitesmoke;
}
.login_register_container {
border: none;
outline: none;
border-radius: 50%;
}
button {
margin-right: 12px;
margin-top: 30px;
border: none;
border-radius: 4px;
cursor: pointer;
}
I want to dynamically manage the size according to the child element.
I've tried several methods, but without success. How to fit modal's component to child element???
If you use the developer tools you can see that the content grows because they have applied some styles to the modal.
position: absolute;
inset:40
inset is same as
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
If you want your content to be exactly the same size as your content, you can remove the right and bottom from the styles.
<ReactModal
isOpen={true}
contentLabel="Minimal Modal Example"
className="Modal"
>
<div>
<div style={{ height: '500px' }}>Some content</div>
</div>
<button onClick={() => {}}>Close Modal</button>
</ReactModal>
CSS:
.Modal {
position: absolute;
top: 40px;
left: 40px;
background-color: papayawhip;
}
You will lose equal spacing on all sides of the modal if you do this though.
Here is an example. https://stackblitz.com/edit/react-vxe3cn
How do I get the nested SVG to have the same hover effect as the anchor tag? When I hover over one it should change both, but right now they are not being seen as the same entity.
I am trying to apply a style to an SVG on hover. The SVG is nested inside of a NavLink component. The CSS that is class-specific gets applied to the SVG, but the hover for the a tag that the SVG is nested in only applies to the a tag's text. I have tried using just the Link component from react-router-dom. I have noticed that when I removed the text-decoration: none from my CSS, the underline only applies to the text. In the rendered HTML the a tag DOES nest the svg tag.
I have tried wrapping the anchor tag and SVG in a span and giving the span the hover effect, it did not work.
component
import {Link, NavLink} from "react-router-dom";
import logo from '../../assets/LogoOnly_Square_Transparent.png';
import { ReactComponent as CalculatorIcon } from '../../assets/calculator.svg';
import './header.styles.scss';
export const Header = () => {
return (
<nav className="header">
<div className='options'>
<Link className='logo-container' to='/'>
<img src={logo} alt="Logo" className='logo'/>
</Link>
<NavLink to='/calculator' className='header-option'>CALCULATOR<CalculatorIcon className='link-icon'/></NavLink>
</div>
<div className='options-right'>
<Link to='/sign-in-sign-up' className='header-option'>SIGN IN</Link>
</div>
</nav>
)
}
CSS
border-bottom: 1px solid #D1D3D4;
height: 70px;
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
padding: 5px;
.options {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
.logo-container {
width: 70px;
margin: 5px 0;
height: 100%;
.logo {
height: 100%;
}
}
.header-option {
padding: 10px 15px;
font-size: 16px;
.link-icon {
height: 13px;
fill: #58595B;
margin: auto 5px;
}
&:hover {
color: #4FB47C;
fill: #4FB47C;
}
}
}
a {
text-decoration: none;
color: #58595B;
&:hover {
color: #4FB47C;
fill: #4FB47C;
}
}
.options-right {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.header-option {
padding: 10px 15px;
}
}
}
I'm working on some basic styling for my personal project, and for some reason, most of the class selectors in my css file Header.css works, except headerOptionCount. Earlier, some other classes weren't working, but putting Header.css in a styles directory seemed to help, but now it is happening again. When changing margin-left and margin-right of headerOptionCount, nothing changes. When inspecting the element in dev tools, the styles dont show up at all.
Header.css:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}
.headerLogo {
width: 60px;
object-fit: contain;
margin: 0 10px;
}
.headerSearch {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}
.headerSearchInput {
width: 100%;
height: 12px;
padding: 10px;
border: none;
}
.headerSearchIcon {
padding: 5px;
height: 22px !important;
background-color: tomato;
}
.headerOptionLineOne {
font-size: 10px;
}
.headerOptionLineTwo {
font-size: 13px;
font-weight: 800;
}
.headerOptionBasket {
display: flex;
align-items: center;
color: white;
}
.headerOptionCount {
margin-left: 10px;
margin-right: 10px;
}
.headerNav {
display: flex;
justify-content: space-evenly;
}
.headerOption {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
Here is my Header component that imports this css file.
Header.js:
import React from "react";
import logo from "../zipshopIcon.png";
import { Search, ShoppingCart } from "#material-ui/icons";
import "../styles/Header.css";
const Header = () => {
return (
<div className="header">
<img className="headerLogo" src={logo} alt="Logo" />
<div className="headerSearch">
<input className="headerSearchInput" type="text" />
{/* Logo */}
<Search className="headerSearchIcon" />
</div>
<div className="headerNav">
<div className="headerOption">
<span className="headerOptionLineOne">Hello Guest</span>
<span className="headerOptionLineTwo">Sign In</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Returns</span>
<span className="headerOptionLineTwo">& Orders</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Your</span>
<span className="headerOptionLineTwo">Prime</span>
</div>
<div className="headerOptionBasket">
<ShoppingCart />
<span className="headerOptionTwo headerBasketCount">0</span>
</div>
</div>
</div>
);
};
export default Header;
The import directory is definitely correct since the other styles work. I've tried using css modules, but it didnt fix anything. Should i try using scss? it just baffles me why class selectors cant even work when imported as css files. Any advice would be appreciated, thanks!
None of your elements in the js have the classname headerOptionCount, you need to give the element you want to have those styles the classname for it to work.