Actualmente tengo el siguiente código: 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; En FormInput.scss :
.formInput-label { transition: 300ms ease all; position: absolute; font-size: 18px; left: 5px; top: 10px; &.shrink { top: -14px; } } Lo que me confunde es que la clase objetivo de la label en FormInput.jsx debería compilarse para:
.shrink .formInput-labelPero el del archivo SASS se compilará en:
.formInput-label.shrinkMi pregunta es ¿cómo se sigue aplicando el estilo correcto si la orientación de la clase en los archivos JSX y SASS no es la misma? El JSX tiene las clases en orden inverso y un espacio en el medio.
El atributo de clase (o className en JSX) define una lista de clases. La sintaxis de las clases es diferente en HTML y en CSS, pero el orden de las clases en el mismo elemento no importa en ninguno de los dos.
JSX se procesa en HTML, por lo que se representa como class="shrink formInput-label" , que define la lista de clases ["shrink", "formInput-label"] y es compatible con el selector de CSS .shrink.formInput-label .
Además, un selector de CSS como .shrink también coincidiría con el elemento (solo que con una calificación de especificidad más baja), porque coincide con una de las clases de la lista.