How to use scss in an input field-CodePudding

I have a styling class called section-changing-input which contains a subclass Input. I want the input to have a red border. However, when I import this class into my <input> element, nothing is displayed.

How do I write the styling class correctly in my div so that I get a red border?

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

CodePudding user response：

I think you have missed dot for the parent class. Also since the main class is placed for the input tag itself, so there is no child element or class required

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