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.
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.