Se agregó el archivo index.css en react-create-app a <head> como el último elemento <style> . Según tengo entendido, esto se debe a que el montaje es un proceso recursivo . Debido a que index.css está en la parte inferior, sus estilos tienen prioridad. me confundió Según mi lógica si quiero usar .title {font-family: Roboto; font-size: 2.5rem} para todos los títulos de mi aplicación, escribiré esto en index.css . Pero cuando quiero usar otro tipo de letra para el título en mi componente <Article /> guardando font-size , escribiré mixin .article__title {font-family: Tahoma} en el archivo Article.css . Pero no da el resultado que quiero. Y la font-family no se sobrescribirá, porque .title tiene prioridad sobre .article__title . ¿Dónde y cómo debo usar estilos comunes que pueda reescribir en componentes?
La cascada de CSS en React será la misma que si estuviera trabajando con HTML estándar: con el mismo nivel de precedencia, la última regla definida gana.
...que puede ser frágil, por lo que, al igual que en HTML+CSS simple, suele ser mejor y más fácil de mantener hacer que las reglas de CSS tengan mayor o menor especificidad, en lugar de depender del orden en que aparecen.
Para su ejemplo, donde tiene .title teniendo prioridad sobre .article__title (supongo que ambos classNames están en el mismo elemento DOM, y .title se definirá más adelante), en lugar de intentar cambiar el orden de las reglas CSS, cambie su especificidad:
.title {/* default rules */} .title.article__title {/* override rules */}Eso tendrá los mismos resultados independientemente del orden en que aparezcan los selectores en sus archivos CSS. (Puede hacer lo mismo usando nodos principales en su lugar: una estrategia muy común en React es tener un conjunto de reglas CSS globales y luego establecer nombres de clase adicionales específicos en el nivel raíz de cada uno de sus componentes que pueden anular esas reglas globales.
O como último recurso, siempre hay !important . (Pero no use !important , simplemente terminará con el mismo problema de especificidad más adelante pero peor).