如何在输入字段中使用 scss答案

【问题标题】：How to use scss in an input field如何在输入字段中使用 scss
【发布时间】：2021-11-21 01:58:50
【问题描述】：

我有一个名为 section-changing-input 的样式类，其中包含一个子类 Input。我希望输入有一个红色边框。但是，当我将这个类导入我的 <input> 元素时，什么都没有显示。

如何在我的 div 中正确编写样式类，以便获得红色边框？

import React from 'react'
import './style/General.scss'


function General() {



    return (
        <div>
                        <div className="field">
                            <p className="control has-icons-left has-icons-right">
                                <input className="section-changing-input" type="text" value="Hello" />
                                <span className="icon is-small is-left">
                                    <i className="fas fa-futbol"></i>
                                </span>
                            </p>
                        </div>


            </div>
        </div>
    )
}

export default General

General.scss

section-changing-input {
    input {
        border-color: crimson !important;
    }
}

【问题讨论】：

你配置你的 react 应用来使用 scss
是的，我已经配置了我的 React 应用程序。
您需要将 className 添加到顶部 div 而不是 input 本身，这就是您在 scss 中编写的内容，下面的答案说您在课堂上缺少 .

标签： css reactjs sass

【解决方案1】：

我认为您错过了父类的点。另外由于主类是为输入标签本身放置的，所以不需要子元素或类

.section-changing-input {
  border-color: crimson !important;
}

【讨论】：

谢谢，没错，但问题仍然是从scss输入的类不允许以红色显示边框