Code is unable to pick css files in react app

Question

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.

How have you attempted to debug so far? Have you console.log'd what [classes.Button,classes[props.btnType]].join(' ') evaluates to? Have you used browser dev tools to see if any of the CSS classes are being applied? — thisisbenmanley
– thisisbenmanley, Commented May 18, 2020 at 18:46

Florian Motteau · Accepted Answer · 2020-05-18 19:54:14Z

4

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

answered May 18, 2020 at 19:54

Florian Motteau

3,7241 gold badge27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Code is unable to pick css files in react app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related