如何为 React 应用程序定义 CSS 规则？答案

【问题标题】：How to define CSS rules for React Application?如何为 React 应用程序定义 CSS 规则？
【发布时间】：2021-01-05 21:16:12
【问题描述】：

我是一个小型 React 项目中的内联样式新手。 CSS 库 Bulma 有助于在我的应用程序中实现一些美感。请问如何在 React/JSX 应用程序中定义多个 CSS 规则？ )

  const viewTemplate = (
      <div className="box" style={{width:"500px", margin-left:"auto", margin-top:"50px", margin-right:"auto"}}>
        <article className="c-media">
            <div className="media-content">
                
                {/*Content*/}
                <div class="content">
                    {/* To DO List Item*/}
                    
                    <label className="todo-label" htmlFor={props.id}>
                    <strong style={{ fontWeight: props.important ? 'bold' : 'normal' , fontSize: "26px"}}>{props.name}</strong>
                    </label>


                    {/* Date, Time & Important Tag*/}

                    <div>
                        <small>04.01.2021,</small><small>17:00 Uhr</small>
                        <span class="tag is-danger is-normal">IMPORTANT</span>
                    </div>

                    <div style="margin-top: 20px;">
                        This is your first To Do Task. It is very important.
                    </div>
                </div>
                     {/* Buttons */}
                    <div className="buttons">
                   
                    <button 
                        type="button" 
                        className="button is-edit"
                        onClick={()=> setEditing(true)}
                    >
                    Edit <span className="visually-hidden">{props.name}</span>
                    </button>

                    <button
                        type="button"
                        className="button is-danger"
                        onClick={() => props.deleteTask(props.id)}
                    >
                    Delete <span className="visually-hidden">{props.name}</span>
                    </button>
                </div>
            
            </div>
          </article>
    );

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

我建议您改为在索引中导入单独的样式文件。应避免内联样式：为组件提供 ID 和类名，然后在单独的文件中声明 CSS（以及 Sass 等）。您始终可以将这些导入App.css 或为每个组件创建索引。如果你正在使用 Bulma，我猜你已经在 App.css 中导入了它的 Sass 文件。只需更改文件夹并对组件执行相同操作，添加：

@import 'path/to/your/component/style.scss'

在App.css。相应地更改此行以导入 CSS。恕我直言，创建一个带有导入所有文件的索引的单个组件文件夹效果更好。

【讨论】：

感谢您的回答：我听从了您的建议，但发生了以下错误：./src/index.css 模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 'C:\Users \pythonbuddha\Desktop\Projects\to-do-list\src\index.css'
它应该是来自同一目录的@import './index.css'：AFAIK，App.css 在src/ 下

【解决方案2】：

您是否正在寻找类似的东西？

<div style={{marginTop: "20px", backgroundColor: 'red'}}>
  This is your first To Do Task. It is very important.
</div>

【讨论】：

谢谢。错误：style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style={{marginRight: spacing + 'em'}}。
@pythonbuddha 对于你提到的这个问题，你可以使用字符串插值。喜欢：style={{marginRight: `${spacing}em`}}
是的，你可以使用模板字符串

【解决方案3】：

你可以在你的刀片 html 中尝试使用

@push('styles')
<style>
</style>
@endpush

或

@push('styles')
    <link href="" rel="stylesheet" />
    @endpush

【讨论】：

【解决方案4】：

在你的 jsx 中使用内联样式，例如：

<some tag style={{property1 : 'value1', property2 : 'value2'}}/>

或在您的 js 中使用内部样式变量，例如：

<some tag style={style1}/>

let style1={
   property1: 'value1',
   property2: 'value2',
   property3: 'value3',}

【讨论】：

【解决方案5】：

如果你想在你的 React 内联样式中添加一些变量，你应该这样做：

<div style={{marginRight: `${spacing}em`}}></div>

【讨论】：