CODEWITHSUNDEEP
cssreactjs
user10447477
user10447477

Reputation:

Style ClassName in react

I'm trying to make my first React Project for a school task.

I started to with npm install -g create-react-app then create-react-app my-app.

I added some html to the app and that works great in the browser. Now I have created a button.js file and a button.css file.

I can't see any changes that I do in the button.css file.

Is it something wrong on the code or do I need to add something more to get the css work?

src/App.js

import React, { Component } from "react";
import './App.css';
import Button from './components/Button'; 

class App extends Component {
  render() {
    return (
  <div className="App">
    <div className="calc-wrapper">
      <div className="row">
      <Button>7</Button>
      <Button>8</Button>
      <Button>9</Button>
      <Button>/</Button>
    </div>
</div> 

);
  }
}

export default App;

src/compontents/Button.js

import React, { Component } from "react";
import './Button.css';

class Button extends Component {
  render() {
    return (
      <div className="button">
      {this.props.children}
      </div> 

    );
  }
}

export default Button;

src/componentes/Button.css

.button {
display: flex;
height: 4em;
flex: 1;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
background-color: #e0e1e6;
color:#888;
outline: 1px solid #888;
}

Upvotes: 0

Views: 177

Answers (1)

Ana Liza Pandac
Ana Liza Pandac

Reputation: 4871

Since you used the lowercased button, it is interpreted as the normal <button> element instead of your <Button> component.

Your App.js should look like this.

import React, { Component } from "react";
import "./App.css";
import Button from "./components/Button";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="calc-wrapper">
          <div className="row">
            <Button>7</Button>
            <Button>8</Button>
            <Button>9</Button>
            <Button>/</Button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Upvotes: 2

Related Questions