CODEWITHSUNDEEP
javascriptcssreactjsjsx
HMT
HMT

Reputation: 2271

Code is unable to pick css files in react app

I have kept the buttn.css and button.js in the same folder in my react app.But css is not rendering.

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;

Please suggest how to proceed without having to make a common css sheet for all the elements.

Upvotes: 2

Views: 71

Answers (1)

Florian Motteau
Florian Motteau

Reputation: 3724

If you are using create-react-app your css file should be named Button.module.css.

Upvotes: 4

Related Questions