i have a product component and im using it on 2 pages when i change the css of the product component the other one changes too how can i give each one its css?
Are you using classes?
<MyComponent className={ condition ? 'Class1' : 'Class2' } />
or styles:
<MyComponent style={ condition ? styleObj1 : styleObj2 } />
You just need some kind of flag so you can tell the difference.
yes i want to style the classes of the product component different on the home page an different on the product page what should i do
You can pass in a flag, a boolean variable, and conditionally apply a class or styles, as shown.
can you show an example pleasee.
If you use the same classes on each component they will share the same styles, I mean that is how CSS works.
Just don’t share the CSS, or use modifier and utility classes to make the changes/modifications to the elements that are using the shared CSS.
If you want scoped CSS, you will have to look at some different options (like CSS Modules or CSS-in-JS, something like Emotion for example).
can you show an example pleasee.
I thought I did. You can pass in a flag to select different classes or different styles. You can also pass in custom styles. If you give an example of you code it might be easier to explain.
I am drifting a lil bit though. I have always wanted to use styled components for this. But the css kind of clutters up the component’s file and make everything look messy.
What i am asking now: is it a good practice to write the styled component or whatever code in another file but the same folder with the component and import it?
I have been using what Kelvin suggests. i am not sure if using a CSS in Js library or so will help in this scenario - at least the ones i have seen generate random classNames. I think they only help to avoid different components matching the same className.
Similar example with class;
className={`generalClassName ${condition ? 'addThisClass' : 'addAnEmptyString'} `}
where am i really going to put this code exactly im using component like this
<Product
title="Felt Pine Tree"
price={30.99}
image="/assets/pine.png"
discount={40.99}
/>
ım getting components class names from its js file am i going to put that on the js file or on the product component
An example of how I am using it right now:
const MobileMenu = ({ visibility, setMobileMenuVisiblity }) => {
const visible = visibility ? 'visible' : ''; // visible class will only be added if visiblity is truish
return createPortal(
<>
<div
className={`mobile-menu-overlay ${visible}`}
onClick={() => setMobileMenuVisiblity()}></div>
<div className={`mobile-menu ${visible}`}>
<div
className="mobile-logo"
onClick={() => {
setMobileMenuVisiblity();
history.push('/');
}}>
<Logo />
</div>
<hr />
<Categories isMobileScreen={true} />
<hr />
</div>
</>,
document.querySelector('#mobile-menu')
);
};
const mapState = state => {
return {
visibility: getMobileMenuVisibility(state),
};
};
export default connect(mapState, { setMobileMenuVisiblity })(MobileMenu);
And here:
const Header = ({ setMobileMenuVisiblity }) => {
return (
<div className="container">
<nav className="header-nav">
<Breakpoint small down>
<div className="nav-item menu-bar">
<MobileMenu />
</div>
</Breakpoint>
</nav>
</div>
);
};