css - 为什么当我的 react 呈现我的组件页面时我的 css 文本显示？

Question

出于某种原因，我的 CSS 文本显示在我的页面中。我想知道这是否与导入 css 有关？我删掉了 jsx 中的一些代码。我已将 webpack 配置为使用 css。

page with css showing, css showing as text attribute with text id in css

import React, { Component } from 'react';
import '../css/style.css';
import profile_pic from '../res/img_profile_pic.png';

    class Manager_Home extends Component {
      render() {
        return (
             <div classname="Mainpage">
        <div className="sidenav">
                <img src={profile_pic} ></img>
                <p>John Smith</p>
                <p>Manager</p>
                <hr></hr>
                <a href="/home">Home</a>
                <a href="/createSurvey">Create Survey</a>
                <a href="/givenSurveys">Given Surveys</a>  
        </div>
        
        <div className="main">
            <h2>Your Surveys</h2>
            <p class="borders">Survey 1</p>
        </div>
    </div>
        );
      }
    }
    export default Manager_Home;

Answer 1

我通过删除 display: block 在 css 中解决了这个问题。我不确定为什么它会导致 css 文本显示出来。