Esta refactorización modifica la forma en que los widgets manejan sus estilos para prevenir conflictos con los CSS de los sitios anfitriones donde se incrustan. Se ha migrado el sistema de estilos de CSS global a CSS Modules para todos los componentes principales y sus hijos, asegurando que todas las clases sean únicas y estén aisladas. Cambios principales: - Se actualizan los componentes .tsx para importar y usar los módulos de estilos (`import styles from ...`). - Se renombran los archivos `.css` a `.module.css`. - Se añade una regla en cada módulo para proteger la `font-family` y el `box-sizing` del widget, evitando que sean sobreescritos por estilos externos. - Se ajustan los selectores para librerías de terceros (react-select, react-simple-maps) usando `:global()` para mantener la compatibilidad. - Se mueven las variables CSS de `:root` a las clases principales de cada widget para evitar colisiones en el scope global. Como resultado, los widgets (`HomeCarouselWidget`, `PanelNacionalWidget`, `ResultadosNacionalesCardsWidget`, `CongresoNacionalWidget`) son ahora más robustos, portátiles y visualmente consistentes en cualquier entorno.
		
			
				
	
	
		
			43 lines
		
	
	
		
			7.9 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			43 lines
		
	
	
		
			7.9 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| // src/features/legislativas/nacionales/components/CabaLupa.tsx
 | |
| 
 | |
| // 1. Importamos el archivo de estilos como un módulo CSS
 | |
| import styles from '../PanelNacional.module.css';
 | |
| 
 | |
| interface CabaLupaProps {
 | |
|   fillColor: string;
 | |
|   onClick: () => void;
 | |
| }
 | |
| 
 | |
| export const CabaLupa = ({ fillColor, onClick }: CabaLupaProps) => {
 | |
|   // 2. Todas las props 'className' ahora usan el objeto 'styles'
 | |
|   return (
 | |
|     <svg viewBox="0 0 542 256" className={styles.cabaLupaSvg}>
 | |
|       <g transform="translate(10, 10)">
 | |
|         <g
 | |
|           onClick={onClick}
 | |
|           className={styles.cabaLupaInteractiveArea}          
 | |
|         >
 | |
|           <g transform="rotate(25.8155, 280.549, 151.582)">
 | |
|             <ellipse ry="116.11771" rx="123.49187" cy="69.21453" cx="372.69183" stroke="#999" strokeWidth="2" fill="#fff" />
 | |
|             <line y2="349.14808" x2="65.51709" y1="10.50607" x1="266.30705" stroke="#999" strokeWidth="2" fill="none" />
 | |
|             <line x2="64.91493" y2="350.06629" y1="173.80285" x1="425.51263" stroke="#999" strokeWidth="2" fill="none" />
 | |
|           </g>
 | |
|           <g data-tooltip-id="mapa-tooltip"
 | |
|           data-tooltip-content="C.A.B.A."
 | |
|           data-tooltip-anchor-id="caba-lupa-anchor"
 | |
|           data-tooltip-place="top">
 | |
|             <g>
 | |
|               <path
 | |
|                 stroke="#000000"
 | |
|                 strokeWidth="2"
 | |
|                 fill={fillColor}
 | |
|                 d="m369.45242,18.85734l2.144,0.04631l3.62358,-2.29379l2.52088,-0.10238l1.68617,1.35531l0.12004,4.02937l-0.46621,1.05548l3.23554,3.55647l0.87379,-0.0585l1.36513,-2.3596l1.63592,0.08775l1.50471,4.34138l1.77829,0.06582l-0.01954,-3.08845l0.95475,-0.00731l2.01,1.91352l0.3685,1.79408l2.60463,2.53024l4.54483,1.49182l6.41804,0.08288l2.50133,1.97203l0.27917,7.86129l17.9895,8.28787l8.44479,7.44202l2.09654,-0.01219l1.28696,1.18955c0.11446,0.01463 0.22054,0 0.335,0.01706c0.4355,-0.02925 0.96313,0.02194 1.24229,-0.05119c0.49133,-0.13407 0.96313,0.02438 1.18088,0.21695c0.26242,0.21938 0.10888,0.78003 0.15354,1.03111c0.00279,0.41196 -0.03629,0.79954 -0.00558,1.14811c-0.00279,0.38027 0.02233,0.72884 -0.01396,1.11642c0.0335,0.37539 0.01675,0.69716 0.01396,1.07986c0.02233,0.50702 0.08654,0.65815 0.25683,0.98236c0.13958,0.17063 0.804,0.17307 0.99383,0.20963c0.42992,0.13163 0.63929,0.26082 0.96592,0.43877c0.51088,0.18282 0.469,0.15601 0.59183,0.61671c0.06421,0.15357 0.67279,0.44852 0.76492,0.56065c0.34617,0.26814 0.44388,0.60696 0.95754,0.78735c0.43271,0.16088 1.00779,0.08044 1.48517,0.078c0.49133,0.05606 0.89613,0.06338 1.3735,0.0585c0.59183,0.01219 0.81517,0.04388 1.18646,0.24864c0.12283,0.07557 0.55554,0.01463 0.73979,0.02194l7.87529,6.34266l-0.04746,-3.81486l-7.79433,-5.33349c-0.01396,-0.4729 0.08375,-0.93604 0.06142,-1.44306c0.03071,-0.2267 -0.00838,-0.44608 -0.01117,-0.66547l2.29754,0.08775l3.06246,2.43517l1.75038,-0.08775l3.1825,-1.6917l2.16354,1.73314l-3.34442,1.62101l1.39304,1.36506l4.56717,-2.36692l5.52471,4.19025l-3.15458,1.65514l1.72804,1.57226l3.83296,-2.35473l4.15958,2.37423l-5.293,3.42484l2.23613,1.53082l4.80725,-3.45165l2.18029,2.01834l-4.22379,3.42972l1.59963,1.49425l4.12888,-3.35415l0.17029,2.7155l-3.32767,2.70087l1.06363,1.56738l3.10433,-2.31817l1.15296,2.03784l-5.44933,3.3834l2.09933,3.5906l-4.07304,1.85014l0.09771,1.32362l3.84133,0.06338l0.08375,6.0087l6.67767,20.5271c0.08933,0.08532 0.10888,0.17551 0.12283,0.27057c0.12563,0.4924 0.53321,0.3047 0.98825,0.36808c0.40479,0.00731 0.77608,0.0195 1.21996,0.02194c0.51088,-0.01219 0.62813,-0.18526 1.04129,-0.34127c0.3015,-0.16819 0.75933,-0.07313 1.13063,-0.06338c0.51367,-0.00975 0.78725,0.08044 1.05525,0.13894c0.27358,0.08775 0.80679,0.17063 1.11667,0.25351c0.54158,0.15113 0.91008,0.35102 1.34,0.48021c0.46621,0.12676 1.08596,0.10238 1.57171,0.13163c0.44108,-0.00244 0.81238,0.00975 1.21996,0.0195c0.47458,-0.00731 0.804,-0.0195 1.13063,0.15601c0.28754,0.15113 0.26242,1.01405 0.31825,1.32362c-0.00279,0.3827 -0.05304,0.70934 -0.05583,1.09205c0.05863,0.49971 0.01396,0.66547 0.6365,0.64353c0.40479,0.00731 0.77608,0.0195 1.18367,0.02438c0.25683,-0.00488 0.69513,-0.41683 0.80958,-0.59234c0.28754,-0.23157 0.37967,-0.53384 0.66163,-0.79466c0.31267,-0.29739 0.96033,-0.19988 1.36233,-0.19257c0.55554,0.0195 0.88775,0.03656 1.33442,0.25595c0.59742,0.23645 1.11667,0.45096 1.81458,0.44608c0.33221,0.01706 1.52425,0.67522 1.73083,0.80685c0.31546,0.11701 0.38804,0.29739 0.48575,0.63378c0.17029,0.51677 -0.01117,0.73372 -0.47179,0.83122c-0.52483,0.13651 -0.90171,0.09507 -1.38188,0.29008c-0.41317,0.15357 -0.75933,0.2657 -0.80679,0.62403c-0.05583,0.29495 0.68117,0.2852 0.73142,0.56553c-0.01675,0.5119 -0.05863,0.67766 0.55554,0.62159c0.59742,0.04388 0.74538,0.6289 0.96313,0.81904c0.30708,0.27545 0.62254,0.58259 0.8375,0.74347c0.43829,0.38514 0.37967,0.87023 0.80121,1.35287c0.18146,0.19745 0.08933,0.87998 0.1005,1.13349c-0.01675,0.5119 0.04746,0.66059 -0.44667,0.76297c-0.49692,0.10238 -1.02175,0.04875 -1.61358,0.03656c-0.44946,-0.03169 -0.92683,-0.02925 -1.40421,-0.02438c-0.36571,-0.01219 -0.7705,-0.59234 -0.83471,-0.74103c-0.09492,-0.30714 -0.53879,-0.5314 -0.72304,-0.72641c-0.30708,-0.27545 -0.49692,-0.09263 -0.71188,0.32176c-0.21775,0.41439 -0.41317,0.53871 -0.39083,1.07255c0.01117,0.44608 0.05583,0.69228 -0.25683,0.99211c-0.25125,0.22914 -0.469,0.25595 -0.76771,0.42902c-0.44108,0.19013 -0.92683,-0.63378 -1.06363,-0.77272c-0.39921,-0.35833 -0.61417,-0.74103 -0.871,-1.1213c-0.26521,-0.43877 -0.27079,-0.46802 -0.871,-0.5119c-0.4355,0.02925 -0.46621,0.86291 -0.52483,1.12374c-0.1005,0.46071 -0.05583,0.89948 -0.03908,1.37481c-0.00279,0.57528 -0.19821,0.73128 -0.54717,1.22368c-0.47458,0.6094 -0.88496,0.98479 -1.39025,1.44063c-0.28196,0.26326 -0.70071,0.38514 -0.93521,0.51434c-0.45225,0.15844 -0.6365,0.53627 -1.08038,0.72641c-0.40758,0.18526 -0.7705,0.20476 -1.19483,0.29739c-0.07258,0.00975 -0.15075,-0.01219 -0.23171,-0.06338l-12.62671,-10.1307l0.06421,3.52722l8.83283,6.93987l0.46621,2.13291l-4.47225,3.88067c-0.18425,-0.00488 -0.33779,-0.04631 -0.52483,-0.05119c-0.41038,-0.039 -0.73979,0.58259 -0.93521,0.70691c-0.34338,0.33395 -0.88496,0.1877 -1.47679,0.17551c-0.62254,0.02438 -1.17808,0.00731 -1.73363,-0.01219c-0.59463,-0.04144 -1.14458,-0.02681 -1.77271,-0.03656c-0.62813,-0.00731 -0.71188,0.3242 -0.63929,0.91898c0.00838,0.63622 0.07538,1.00917 0.24567,1.52594c0.201,0.70447 0.39363,0.74347 1.13063,0.73372c0.52483,0.05119 0.41038,0.83366 0.49133,1.26999c0.06421,0.3437 0.81517,0.61671 1.00221,1.03842c0.14517,0.58259 -0.14517,1.00673 -0.25125,1.43575c-0.15354,0.56309 -0.51367,0.80685 -0.89613,1.11399c-0.37408,0.37295 -0.6365,0.53627 -0.91567,1.0238c-0.07817,0.16819 -1.30929,0.08775 -1.60521,0.06582c-0.73421,0.00975 -0.536,0.48996 -0.90729,0.86048c-0.48296,0.38758 -0.75654,0.68009 -1.25625,0.97261c-0.28754,0.23401 -0.81517,0.37052 -1.15854,0.51677c-0.61138,0.27545 -1.11946,0.69959 -1.59404,0.92629c-0.58067,0.24132 -0.84308,0.40708 -1.27021,0.87754c-0.42992,0.47533 -0.73421,0.61671 -1.24788,1.00429c-0.54158,0.45827 -0.49692,0.70934 -1.15575,1.11886c-0.49413,0.32664 -0.75096,1.12861 -1.13342,1.43575c-0.44667,0.3827 -0.74538,0.55334 -1.1055,0.98479c-0.42154,0.50458 -0.85425,0.7581 -1.1725,1.02623c-0.40758,0.37539 -0.82075,0.33883 -1.12225,0.88973c-0.34338,0.52896 -0.56671,0.71909 -1.02733,0.81416l-8.2075,0.39733l-4.82958,3.13233c-0.08654,0.14138 -0.35175,0.08288 -0.53042,0.10969c-0.07817,0.16819 -0.36571,0.20963 -0.5695,0.30226c-0.12563,0.3047 -3.32767,-0.07069 -4.17354,-0.078c-0.66442,-0.00244 -1.26183,-0.04631 -1.95975,-0.04388c-0.59183,-0.00975 -1.14179,0.00244 -1.73363,-0.00975c-0.59742,-0.04388 -1.18925,-0.05363 -1.77271,-0.03656c-0.59183,-0.01219 -1.11108,-0.03656 -1.70292,-0.04631c-0.47458,0.00244 -0.84588,-0.00975 -1.28696,-0.01219c-0.3685,-0.00975 -1.28138,-1.15543 -1.89833,-1.28949c-0.03908,-0.02681 -0.14517,-0.01219 -0.21775,-0.00244l-17.16317,-0.25351l-3.64033,2.2036l-20.96263,24.88067l-19.20946,21.86047l-26.42313,-21.62402l-47.89663,-39.3625l-6.33429,-19.87626l0.37129,-43.47475l32.1935,-61.22541l40.21954,-15.55925z"
 | |
|               />
 | |
|             </g>
 | |
|             <line y2="102.27935" x2="498.72248" y1="99.86023" x1="498.27698" stroke="#000000" fill="none" />
 | |
|           </g>
 | |
|         </g>
 | |
|       </g>
 | |
|     </svg>
 | |
|   );
 | |
| } |