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.

Answer 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;

Answer 2

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.