Как отображать разные стили css на одном компоненте?

У меня есть компонент реакции, который является кнопкой, и я визуализирую этот компонент три раза. Я хочу добавить немного CSS для второго компонента, но я не знаю, как это сделать. Я попытался добавить несколько имен классов, но потом не могу понять, куда поместить этот стиль в CSS. Я могу изменить css в element.style в инструментах разработки, но не могу в проекте.

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 = ({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;