React js different css same component

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>
  );
};