Question

我正在为我的学校任务做我的第一个React Project。

我从npm install -g create-react-app开始，然后是create-react-app my-app。

我在应用程序中添加了一些html，在浏览器中效果很好。现在，我已经创建了一个button.js文件和一个button.css文件。

在button.css文件中看不到任何更改。

代码有问题吗？还是需要添加更多内容才能使CSS工作？

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;
}

Answer 1

由于使用了小写的button，因此它被解释为普通的<button>元素，而不是<Button>组件。

您的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>
      </div>
    );
  }
}

export default App;

反应中的样式ClassName

1 个答案: