Estoy usando la tabla de reacción. En esta tabla tengo una columna. En ese encabezado de columna y celda de columna, necesito cambiar mi propiedad de estilo maxWidth para que sea 60 para xs a xl y 30 para xxl. ¿Hay alguna manera de hacer esto en línea? Me gustaría hacer cambios solo dentro de este objeto de estilo headerProps y cellProps en lugar de crear un archivo separado y vincular el componente a él. No soy el mejor en scss, este proyecto está usando scss.
Aquí está mi accesorio que tiene cellProps y headerProps
const columns = [ { accessor: 'firstName', Header: 'First Name', Cell: firstNameFormatter }, { accessor: 'lastName', Header: 'Last Name', Cell: lastNameFormatter }, { accessor: 'actions', Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />, headerProps: { className: 'bg-light', style: { maxWidth: 60 <--- make this maxWidth 30 only for xxl screens } }, Cell: actionFormatter, sticky: 'right', cellProps: { className: 'bg-light', style: { maxWidth: 60 <---- make this maxWidth 30 only for xxl screens } }, } ];Hay una manera, pero no es bonita. Javascript no puede usar las consultas de medios que CSS nos ofrece, por lo que debe solucionarse
Establezca un detector de eventos en el evento de cambio de tamaño. En la función de devolución de llamada, establezca algún valor de estado con el ancho calculado de la ventana. Luego configure su maxwidth en cellProps para que sea este estado.
Algo como esto:
const [maxWidth, setMaxWidth] = useState(getWidth()) function getWidth() { const body = document.querySelector("body") const width = parseFloat(window.getComputedStyle(body).width) if (width > 1200) { return 30 } else { return 60 } } window.addEventListener("resize", () => setMaxWidth(getWidth())) const columns = [ { accessor: 'firstName', Header: 'First Name', Cell: firstNameFormatter }, { accessor: 'lastName', Header: 'Last Name', Cell: lastNameFormatter }, { accessor: 'actions', Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />, headerProps: { className: 'bg-light', style: { maxWidth: maxWidth } }, Cell: actionFormatter, sticky: 'right', cellProps: { className: 'bg-light', style: { maxWidth: maxWidth } }, } ];