1

I am starting out on React and am just trying to style a button. It is ignoring the styling though. I am not sure if I am missing a package or if I am doing something rather simple incorrectly.

My App.js file

import React from 'react';
import Transactions from './Components/Transactions';

const App = props => {
  return (
  <div><Transactions /></div>
  );
}

export default App;

My Transactions.js file

import React from 'react';
import Button from '../button/button';

const Transactions = (props) => {
    return (
        <Button caption='blah'></Button>
    );
};

export default Transactions;

My button.js file

import React from 'react';
import classes from './button.css';


const button = (props) => (
    <button
        className={classes.Button}>{props.caption}
    </button>
);

export default button;

My button.css file (both button.js and button.css are in a button folder under src)

.Button {
    font-size: 24pt;
    background-color: purple;
    color: white;
    width: 150px;
    border-radius: 8px;
}

Edit 1 While I can get this to work by doing just the following modifications in the button.js file, I seek to do the CSS modules approach. I used create-react-app to create the application but think I must be missing something else. Do I need to eject the application? Am I missing an import library?

import React from 'react';
import './button.css';


const button = (props) => (
    <button
        className={"Button"}>{props.caption}
    </button>
);

export default button;
Lee Z
  • 802
  • 2
  • 13
  • 39
  • Possible duplicate of [How to import a css file in a react component?](https://stackoverflow.com/questions/39853646/how-to-import-a-css-file-in-a-react-component) – Rikin Nov 01 '19 at 00:56
  • 2
    just set `className="Button"` and `import ./button.css` – George Nov 01 '19 at 01:00
  • @Rikin - I am not getting errors and if I attempt to debug the page and manually add the class (i.e. via the F12 command in Chrome) it will work. – Lee Z Nov 01 '19 at 01:23
  • @George - className="Button" will not work as it has to come from classes.Button since that was the name it was imported as. The sample shows the import of the css – Lee Z Nov 01 '19 at 01:23
  • 1
    Console.log classes and see what you are getting – Rikin Nov 01 '19 at 01:25
  • If I had just done the import as: import './button.css'; and then done className=<{"Button"}> the example would have worked – Lee Z Nov 02 '19 at 00:04

1 Answers1

2

I think it's on your import and filename. CSS modules follow {component}.module.css naming convention. So, you could try:

  1. Renaming button.css to button.module.css
  2. import styles from './button.module.css
  3. Use styles.Button in your class name

See: CSS Modules

justelouise
  • 714
  • 1
  • 5
  • 20
  • I went back through my React class and followed some of the links and just found that. Your answer is perfect. – Lee Z Nov 04 '19 at 02:44