I've encountered an issue with my React app where the button.css file is not rendering properly even though I've kept both the buttn.css and button.js in the same folder.
Button.css
.Button {
background-color: transparent;
border: none;
color: white;
outline: none;
cursor: pointer;
font: inherit;
padding: 10px;
margin: 10px;
font-weight: bold;
}
.Button:first-of-type {
margin-left: 0;
padding-left: 0;
}
.Success {
color: #5C9210;
}
.Danger {
color: #944317;
}
Button.js
import React from 'react';
import classes from './Button.css';
const Button = (props) => (
<button
className={[classes.Button,classes[props.btnType]].join(' ')}
onClick={props.clicked}>{props.children}</button>
);
export default Button;
Any suggestions on how to resolve this issue without creating a common css sheet for all elements would be greatly appreciated.