How to render different style css on same component?-CodePudding

Hi a have react component witch is a button and I render this component a 3 times,now I want to add some css on the second component but I dont know how.I tray to add some className but then can't figure it out where to put this className style in which css file.

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;

CodePudding user response：

Your question is unclear.

If you are trying to use the same button component 3 times on the same page with different styling for each one then you need to use props to style the buttons.

If these buttons are all on different pages then simply import the css relevant to the button in that page and it'll work.

CodePudding user response：

You have props that you don't use, this is a good simple read on How to Pass Props to component:

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;