I use class modules throughout my project, but for some reason in one of my components it isn't built correctly:
import Body from './Body';
import IllustrationJobs from '../../assets/images/illu_jobs.svg';
import styles from "./Careers.modules.css";
const Careers = () => {
return (
<Body>
<section className={styles.rowOneContainer}>
<div className={`${styles.careersText} animate__animated animate__fadeInLeft`}>Right now we don't have any open positions. Make sure to check by
soon again or contact us directly.</div>
<div className={`${styles.careersImage} animate__animated animate__fadeInRight`}><img src={IllustrationJobs} alt="illustration_jobs"/></div>
</section>
</Body>
)
}
export default Careers;
CSS
.rowOneContainer {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.careersText {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5rem;
color: var(--salaryx-purple-dark);
}
.careersImage {
width: 50%;
}
returns
while in other components the very same syntax returns the correct class. Why's that?
Careers.modules.css is invalid format for the file
Use Careers.module.css instead
What is the "animate__animated animate__fadeInLeft"?.
Is that a style module or regular CSS?
Are those two class names?
Where is the code for this?
Related
I'm witnessing a weird behavior when in styled-components with SSR in remix.run
I have a ProductCard Component that renders a normal product card with styled-components
ProductCard.tsx
import Button from "../Button";
function ProductCard({ product }: props) {
return (
<>
<Wrapper>
....
<ButtonsWrapper>
<Cart
onClick={addToCart}
mode={addedToCart ? "secondary" : "primary"}
disabled={loading}
key="cart-button"
>
{addedToCart ? "Added!" : "Add to cart"}
{loading && <LoadingSpinner src="/images/responses/loader.svg" />}
</Cart>
<ShareButton mode="secondary" aria-label="share">
<Icon id="share" />
</ShareButton>
</ButtonsWrapper>
</Wrapper>
</>
);
}
const Cart = styled(Button)`
flex: 1.1;
display: flex;
justify-content: center;
gap: 10px;
`;
const ShareButton = styled(Button)`
padding: 0.9rem;
`;
const Wrapper = styled.div`
--border-radius: ${clamp(15, 20)};
--columnGap: ${clamp(20, 30)};
display: flex;
flex-direction: column;
gap: var(--columnGap);
justify-content: space-between;
width: 100%;
height: 100%;
margin: auto;
background-color: var(--azure-15);
padding: 1.9rem 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-lg);
border: var(--border-lg);
`;
const ButtonsWrapper = styled.div`
display: flex;
justify-content: space-between;
gap: 0.625rem;
`;
export default ProductCard;
Button.tsx
const Button = styled.button<{ mode: "primary" | "secondary" | "dark" }>`
display: grid;
/* justify-content: center; */
align-items: center;
text-align: center;
color: var(--mintCream);
padding: ${clamp(9, 10)} ${clamp(20, 30)}; // this clamp function just generates the css clamp func with calculating the values with some equations
box-shadow: var(--box-shadow-md);
border: var(--border-md);
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: all 500ms ease;
font-size: ${clamp(13, 16)};
&:disabled {
cursor: not-allowed;
opacity: 0.7;
}
#media (hover: hover) and (pointer: fine) {
&:hover:enabled {
transform: translateY(-2px); }
}
width: fit-content;
`;
The normal render of this Component is as follows
But when navigating to another path and returning to it on / , it renders like this
This problem only happens in production and works fine on local server...
when inspecting elements, I find that the class name of the Cart Component is also injected into the ShareButton Element
I can't find an explanation for this problem and it gets weirder... When I swap the order of the variables Cart and ShareButton or swap them with the Wrapper Element, some other weird behaviors happen like the one below
In this case, the class name of the Cart Component got injected on the parent elemnt of the parent element of the ProductCard Component
I've probably hit on 4 of these rendering issues but all of them share the same problem, the class name of the Cart Components gets injected on a wrong dom element, whether it's a parent or a sibiling
You can view the first weird behaviour here https://store.ieeenu.com
You will find the product component on the root path, navigate to some path like categories/circuits-1-ecen101 and return to the root and you will see the issue
also, you can review the second weird behavior in a previous build here
https://ieee-nu-store-r243eocii-omarkhled.vercel.app/
I just changed the initialization order of the Cart and ShareButton Components as I said earlier
I don't know whether this problem is from styled-components or from remix (this is the first time for me using remix), it's mentioned here https://github.com/remix-run/remix/issues/1032 that the lack of the babel-plugin-styled-components in remix.run introduces some problems in rehydration but I'm not sure that this is the issue I'm facing...
Thanks for reading this till the end and excuse my English, I'm not a native speaker :"
Lets say in my global.css file of a Next.js project I have:
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
I also have a Layout.js component and a Layout.module.css file. The component looks like this:
import styles from "../styles/Layout.module.css";
const Layout = ({ children }) => {
return (
<div>
<div className={styles.navbar}>
<div className="flex">
<h1>Structured Safety</h1>
<nav>
<ul>
<li> Home </li>
<li> Demo </li>
</ul>
</nav>
</div>
</div>
</div>
);
};
export default Layout;
and the Layout.module.css is:
/* Navbar */
.navbar {
background-color: var(--primary-color);
color: #fff;
height: 70px;
}
.navbar ul {
display: flex;
}
.navbar .flex {
justify-content: space-between;
}
Structured like this, my .navbar .flex does not overwrite the global .flex class and split the h1 from the nav. How can I accomplish overwriting my global style from this component style?
Since .flex refers to a global class you'll need to use the :global selector to target it in your CSS module.
/* Layout.module.css */
.navbar :global(.flex) {
justify-content: space-between;
}
Or using an alternate syntax.
.navbar {
:global {
.flex {
justify-content: space-between;
}
}
}
/** CSS MODULE FILE **/
.classname :global(.globalClass) { css properties }
.classname {
:global {
.globalClass { css properties }
}
}
In NextJS and React when you
import styles from "__.css" the styles becomes a variable so you have to use it in your HTML for it to take effect.
Currently you're not using any styles from your Layout.module.css, if you want to use that css you would change your html to: <div className={styles.navbar}> and such..
I have a header and I want to mark the link currently by selecting.
With Styled-Component I must write something like: Const NavLink = styled (link) ... But with the properties of the NAV element there is one that is called ActiveClassname and it can be put on an already defined class, my question is how I define that Independent class with Styled-Component.
I would like to create a class that is called something like Linkactive and that can happen something so ActiveClassname = "Linkactive". But I have not been able to.
code of navMenu
<NavMenu>
{menuData.map((item, index) => (
<NavLink to={item.link} key={index} activeClassName="active">
{item.title}
</NavLink>
))}
</NavMenu>
code with styled-component
const NavMenu = styled.div`
display: flex;
align-items: center;
/* margin-right: -48px; */
#media screen and (max-width: 768px) {
display: none;
}`
const NavLink = styled(Link)`
color: #00286d;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
`
You can define static props/attributes using .attrs
This is a chainable method that attaches some props to a styled
component.
const NavLink = styled(Link).attrs(() => ({
activeClassName: "LinkActive",
}))`
color: #00286d;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.LinkActive {
// Apply active style here
}
`
If you wanted to use the activeClassName. You can create a class selector on the styling of your NavMenu.
That way, it would only affect .active class of direct/deep child nodes of your NavMenu
const NavMenu = styled.div`
display: flex;
align-items: center;
& .active {
// whatever styling you want
}
#media screen and (max-width: 768px) {
display: none;
}
`;
I'm using the same styles of components below on two different components in ReactJS. I wanted to know if it is possible to use a kind of mixin storing in another file and export them, then just call them on each ReactJS component? This would avoid repetition of code.
// Repeated styles
const TitleInflow = styled.h1`
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
const Table = styled.table`
margin: 0 auto;
margin-top: 100px;
`;
const ThTable = styled.th`
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
`;
Soluce 1 : You can create a common file like :
Common.js
const Common = `
// style you want.
padding: 5px;
color: red;
`
export default Common
and add it in your styled components like
Components.js
import Common from './common'
const TitleInflow = styled.h1`
${Common};
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
Soluce 2 : You can create a component and extend it :
here a component to extend :
const Component = styled.p`
color: red;
fontSize: 12px;
`
extend style like :
const NewComponent = styled(Component)`
// new style you want.
display: flex;
`
and if you want extend style with an another html tag you can do like it when you will use it :
<NewComponent as="h1"/>
Hi I am building a NavBar in ReactJs without any UI library like bootstrap or material just CSS and I want to use flex-direction: row in ol but its not working.
You can see my code below for NavBar component.
import React, { Component } from 'react';
import './landingnav.css';
export default class LandingNav extends Component {
render() {
return (
<div className="navcontainer">
<div className="navbarlogo">
<h3>Codolas</h3>
</div>
<div className="navitems">
<ol className="leftlist">
<li>Why Codolas?</li>
<li>Solutions</li>
<li>About us</li>
</ol>
</div>
</div>
);
}
}
Here is CSS for the same component
.navcontainer {
background-color: rgb(97, 252, 162);
height: 84px;
top: 0;
width: 100%;
margin-top: -18px;
}
.navbarlogo h3 {
position: absolute;
font-size: 28px;
color: rgb(0, 0, 0);
left: 0px;
}
.leftlist {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li {
list-style-type: none;
}
Try giving the list items a flex: 1, the children don't know how much to flex across the space.
I just found the issue actually after adding position: relative to navcontainer, I just simply added ol and put the styles of flex in it and it worked. Thanks to all. Happy coding