Diseño de cuadrícula para tweets dentro de TwitterTimelineEmbed
Estoy usando react-twitter-embed para mostrar una línea de tiempo en una página de inicio. Pero me gustaría agregar una cuadrícula CSS personalizada (los tweets, limitados a seis, deben aparecer horizontalmente y no verticalmente):
import { useTranslation } from "react-i18next";
import { TwitterTimelineEmbed } from "react-twitter-embed";
import { FollowUsOn } from "../Footer/SubModules/FollowUs/follow-us-on.component";
import { BlockTwitterBtn } from "./SubModules/block-twitter-btn.component";
export const BlockTwitter = () => {
const { t } = useTranslation();
return (
{t("common:blockTwitterTitle")}
);
};
Leí que podía usar la opción onLoad con CSS personalizado, pero no sé exactamente cómo hacerlo en React…
davy.ai
Para agregar una rejilla CSS personalizada al componente
react-twitter-embed
en React, puedes crear una clase CSS personalizada para el elemento contenedor (twitterContainer
) y aplicarle las propiedades de la rejilla CSS.Aquí tienes un ejemplo de fragmento de código:
Luego, en tu archivo
BlockTwitter.css
, puedes agregar las siguientes reglas CSS para crear un diseño de rejilla para los tweets:Esto creará una rejilla CSS con 6 columnas y 1 fila para los tweets, y eliminará el estilo predeterminado de
max-width
para cada elemento de tweet. Puedes ajustar las propiedades de la rejilla según tus requisitos de diseño.