The correct styling is applied despite the targeting are different in JSX and CSS files

Issue

Currently I have the following code: FormInput.jsx:

import './FormInput.scss';

const FormInput = ({ label, ...otherProps} ) => {
    const { value } = otherProps;
    return (
        <div className="group">
            <input className="formInput" {...otherProps} />
            {label && (
                <label 
                    className={`${value.length ? 'shrink' : ''} formInput-label`}
                >{label}</label>
            )}
        </div>
    )
};

export default FormInput;

In FormInput.scss:

.formInput-label {
    transition: 300ms ease all;
    position: absolute;
    font-size: 18px;
    left: 5px;
    top: 10px;

    &.shrink {
        top: -14px;
    }
}

What I'm confused about is that the targeted class of the label in FormInput.jsx should compile to:

.shrink .formInput-label

But the one in the SASS file will compile to:

.formInput-label.shrink

My question is how does the correct styling still get applied if the class targeting in the JSX and SASS files aren't the same? The JSX has the classes in reverse order and a space in between.

Solution

The class attribute (or className in JSX) defines a list of classes. The syntax for classes is different in HTML and in CSS, but the order of classes on the same element does not matter in either.

JSX renders to HTML, so it renders as class="shrink formInput-label", which defines the list of classes ["shrink", "formInput-label"] and is compatible with the CSS selector .shrink.formInput-label.

Also, a CSS selector such as .shrink would match the element as well (just with a lower specifity rating), because it matches one of the classes in the list.

Answered By - Noam