0
227
ViewsCambiar el tamaño de fuente del encabezado de la tabla dinámica usando reaccionar
Estoy trabajando en un proyecto en el que estamos creando una interfaz de usuario y estoy tratando de cambiar el tamaño de fuente de las celdas de mi tabla usando reaccionar, pero haga lo que haga, parece que no funciona... Intenté usar "fontSize: 30, " y también fontSize: "30pt", pero nada parece funcionar
import React, {Component} from "react"; import DynamicTable from '@atlaskit/dynamic-table'; export const caption = 'List of Addon Version'; export const createHead = (withWidth) => { return { cells: [ { key: 'pluginName', content: 'Plugin Name', shouldTruncate: true, isSortable: true, fontSize: 30, width: withWidth ? 25 : undefined, }, { key: 'pluginVersion', content: 'Plugin Version', shouldTruncate: true, isSortable: true, width: withWidth ? 25 : undefined, fontSize: 30, }, { key: 'jiraVersion', content: 'Jira Version Group', shouldTruncate: true, width: withWidth ? 25 : undefined, isSortable: true, fontSize: 30, }, { key: 'pluginKey', content: 'Plugin Key', shouldTruncate: true, width: withWidth ? 25 : undefined, fontSize: 30, }, ], }; };agradecería cualquier idea
1 answers
Answer question0
Bueno, las celdas no toman un apoyo de tamaño de fuente. Por eso no te funciona. Pero puede usar styled-components con estilo para ajustar el estilo de la tabla. Mira el ejemplo a continuación.
import React from 'react'; import styled from 'styled-components'; import DynamicTable from '@atlaskit/dynamic-table'; import { caption, head, rows } from './design-system/dynamic-table/examples/content/sample-data'; const Wrapper = styled.div` min-width: 600px; td{font-size:30px} `; // eslint-disable-next-line import/no-anonymous-default-export export default class extends React.Component<{}, {}> { render() { return ( <Wrapper> <DynamicTable caption={caption} head={head} rows={rows} rowsPerPage={5} defaultPage={1} isFixedSize defaultSortKey="term" defaultSortOrder="ASC" onSort={() => console.log('onSort')} onSetPage={() => console.log('onSetPage')} /> </Wrapper> ); } } El Wrapper div con estilo ha tomado un atributo de ancho, pero también podemos anidar atributos de estilo para elementos dentro de Wrapper . Agregué estilo de font-size para las etiquetas td .
Consulte el código en CodeSandbox , agregue el td{font-size:30px} donde lo agregué para ver sus efectos. Puede diseñar lo que quiera dentro del Wrapper , solo asegúrese de agregar las clases/etiquetas/identificadores correctos.
Y echa un vistazo a los apoyos que las células realmente pueden tomar:
Fuente de la imagen: @atlaskit/dynamic-table docs