NextJS: Modificar CSS de componentes de terceros en páginas diferentes.

Con componentes de terceros, la forma de incluir sus estilos es importando su hoja de estilos en _app.tsx o importando la hoja de estilos en tu componente que utiliza el componente de terceros, como se describe aquí: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules o añadiendo al archivo next.config.js de la siguiente manera:



// next.config.js

const withTM = require("next-transpile-modules")([

  "@fullcalendar/common",

  "@fullcalendar/daygrid",

  "@fullcalendar/timegrid",

  "@fullcalendar/interaction",

  "@fullcalendar/react",

  "@fullcalendar/list",

Para modificar la hoja de estilos de terceros, necesitas crear tu propia hoja de estilos y añadirla a _app.tsx; esas modificaciones podrían lucir así:



// styles/modified-fullcalendar.scss

.fc-col-header {

  width: 100% !important;

}

Otra opción, al menos para mi caso de uso (Full Calendar), es utilizar variables de CSS como se describe aquí en la técnica 2 de esta página: https://fullcalendar.io/docs/css-customization. Hubo una extensa conversación sobre esto en la página de problemas de Full Calendar, que se puede ver aquí: https://github.com/fullcalendar/fullcalendar/issues/5393

El problema con todos estos métodos de personalización es que son globales, por lo que en cualquier lugar donde utilices este componente de terceros se verá igual. Sin embargo, en mi caso, quiero utilizar el componente en dos páginas diferentes, con modificaciones de estilos diferentes. Con la mayoría de los frameworks, simplemente importaría la hoja de estilos modificada relevante donde la necesite, pero NextJS no lo permite. ¿Cómo puedo lograr las modificaciones que deseo?

davy.ai

July 22, 2023 at 11:01 pm

Una opción para lograr modificaciones de estilo específicas de página para un componente de terceros en NextJS es utilizar CSS Modules. Esto te permite crear una hoja de estilos separada para cada página que utiliza el componente, y aplicar las modificaciones solo a esa hoja de estilos específica de la página.

Para utilizar CSS Modules con NextJS, puedes crear un archivo CSS para cada página y nombrarlo [nombre-de-página].module.css. Por ejemplo, si tienes una página llamada calendar.js, crearías un archivo llamado calendar.module.css en el mismo directorio. En este archivo puedes escribir reglas de CSS para modificar los estilos del componente de terceros según sea necesario.

Luego, en el archivo del componente de tu página (calendar.js en este ejemplo), puedes importar el componente de terceros así como el módulo CSS para esa página específica:

import FullCalendar from '@fullcalendar/react';
import calendarStyles from './calendar.module.css';

function CalendarPage() {
  return (
    <div>
      <fullcalendar propiedades="" para="" el="" componente="" fullcalendar="" aquí="" classname="{calendarStyles.calendar}"></fullcalendar>
    </div>
  );
}

Ten en cuenta que estamos utilizando la prop className para aplicar el módulo CSS al componente FullCalendar. Esto asegurará que el componente tenga el estilo definido por las reglas CSS de la hoja de estilos específica de la página.

Repite este proceso para cualquier otra página que utilice el componente de terceros, creando un módulo CSS separado para cada página según sea necesario. De esta manera, podrás tener diferentes modificaciones para cada página mientras utilizas el mismo componente de terceros.

Answer

davy.ai

July 22, 2023 at 11:01 pm
Una opción para lograr modificaciones de estilo específicas de página para un componente de terceros en NextJS es utilizar CSS Modules. Esto te permite crear una hoja de estilos separada para cada página que utiliza el componente, y aplicar las modificaciones solo a esa hoja de estilos específica de la página.

Para utilizar CSS Modules con NextJS, puedes crear un archivo CSS para cada página y nombrarlo [nombre-de-página].module.css. Por ejemplo, si tienes una página llamada calendar.js, crearías un archivo llamado calendar.module.css en el mismo directorio. En este archivo puedes escribir reglas de CSS para modificar los estilos del componente de terceros según sea necesario.

Luego, en el archivo del componente de tu página (calendar.js en este ejemplo), puedes importar el componente de terceros así como el módulo CSS para esa página específica:
```
import FullCalendar from '@fullcalendar/react';
import calendarStyles from './calendar.module.css';

function CalendarPage() {
  return (
    <div>
      <fullcalendar propiedades="" para="" el="" componente="" fullcalendar="" aquí="" classname="{calendarStyles.calendar}"></fullcalendar>
    </div>
  );
}
```
Ten en cuenta que estamos utilizando la prop className para aplicar el módulo CSS al componente FullCalendar. Esto asegurará que el componente tenga el estilo definido por las reglas CSS de la hoja de estilos específica de la página.

Repite este proceso para cualquier otra página que utilice el componente de terceros, creando un módulo CSS separado para cada página según sea necesario. De esta manera, podrás tener diferentes modificaciones para cada página mientras utilizas el mismo componente de terceros.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

NextJS: Modificar CSS de componentes de terceros en páginas diferentes.

Answer

davy.ai