How to render different style css on same component?

Question

I have react component which is a button and I render this component three times. I want to add some CSS on the second component but I don't know how. I tried to add some class names, but then I can't figure it out where to put this style in the CSS. I can change css in element.style in dev tools but can't in project.

import './App.css';
import './flow.css';
import './neonButton.css';
import GlowBox from './GlowBox';
import NavBar from './NavBar';

function App() {
  return (
    <div>
      <div className='divBut'>
        <NavBar></NavBar>, <NavBar className='drugi'></NavBar>,<NavBar></NavBar>
      </div>
      <GlowBox></GlowBox>
    </div>
  );
}

export default App;

import styled from 'styled-components';

const NavBar = (props) => {
  return (
    <div>
      <Container>
        <a class='neon'>Neon</a>
      </Container>
    </div>
  );
};
const Container = styled.div`
  background-color: transparent;
`;

export default NavBar;



I try to add props to component 

<!-- begin snippet: js hide: false console: true babel: false -->

and then add a type to a component like this

const NavBar = (type) => {
  return (
    <div>
      <Container>
        <a class={`neon ${type}`}>Neon</a>
      </Container>
    </div>
  );
};

        <NavBar></NavBar>, <NavBar type='drugi'></NavBar>,<NavBar></NavBar>

but nothing is change.

ikiK · Accepted Answer · 2022-04-19 15:48:03Z

1

You have props that you don't use, this is a good simple read on How to Pass Props to component, you can adjust this to other needs, this is example...:

import styled from 'styled-components';

    const NavBar = ({class}) => {
      return (
        <div>
          <Container>
            <a class={class}>Neon</a>
          </Container>
        </div>
      );
    };
    const Container = styled.div`
      background-color: transparent;
    `;
    
    export default NavBar;

...

   import './App.css';
    import './flow.css';
    import './neonButton.css';
    import GlowBox from './GlowBox';
    import NavBar from './NavBar';
    
    function App() {
    
      const NavStyles = {
        className1: 'neon',
        className2: 'drugi'
      };
    
      return (
        <div>
          <div className='divBut'>
            <NavBar class={NavStyles.className1}></NavBar>, <NavBar class={NavStyles.className2}></NavBar>,<NavBar class={NavStyles.className1}></NavBar>
          </div>
          <GlowBox></GlowBox>
        </div>
      );
    }
    
    export default App;

edited Apr 19, 2022 at 15:48

answered Apr 19, 2022 at 15:41

ikiK

6,5105 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vidza Over a year ago

I try this but its doesn't work.

Frank Edwards · Accepted Answer · 2022-04-27 23:11:57Z

0

Edit: Given that you have edited your question I have new information for you.

1.) You can't use the reserved word class in React, because class means something different in Javascript than it does in html. You need to replace all instances of class with className.

2.) Did you notice how in the devtools on your button it says the className says: neon [object object]?

You should use a ternary operator to handle the cases where you don't pass the type prop.

ex.) class={neon ${props?.type !== undefined ? type ''}}

3.) You are trying to apply a className to a component, which does not work. The className attribute can only be applied directly to JSX tags like h1, div, etc. Use a different prop name, then you can use that to decide the elements className.

edited Apr 27, 2022 at 23:11

answered Apr 19, 2022 at 15:36

Frank Edwards

961 silver badge11 bronze badges

4 Comments

Vidza Over a year ago

Yes, it's on the same page. I will try with a props method to add different style on component.

Frank Edwards Over a year ago

Cool, let me know how it works for you.

Vidza Over a year ago

Doesn't work. I update my question so any help now?

Vidza Over a year ago

I got it now. All i need os to use destructuring on props. Tnx to all.

Collectives™ on Stack Overflow

How to render different style css on same component?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related