0

我正在使用 react-data-table-component 库来构建表格。我的一张桌子有一个很长的标题，我想把它包装起来。我在浏览器控制台中尝试了多个 CSS 属性，发现 width:"fit-content" 产生了我想要的结果。

我正在将自定义样式传递给我的 react-data-table，通过它我们可以根据自己的意愿设置标题样式。

import React, { useContext } from "react";
import DataTable from "react-data-table-component";
import Card from "@material-ui/core/Card";
import "./Tables.css";

import { MyContext } from "../../../../Context/MyProvider";


const columns = [
    {
        name: "Sl.No",
        selector: "Sl No",
    },
    {
        name: "Fiscal variables",
        selector: "Fiscal Variables",
    },
    {
        name: "Projection as per MTFP 2018-22",
        selector: "Projection as per MTFP 2018 22",
        wrap: true
    },
    {
        name: "Actuals 2019-20",
        selector: "Actuals 2019 20",
        wrap: true
    }
];


const customStyles = {
    header: {
        style: {
            fontSize: '22px',
            color: '#fff',
            backgroundColor: '#ff6359',
            minHeight: '56px',
            textAlign: "center",
            width: "fit-content"
        },
    }
};

const Table = () => {

    const ctx = useContext(MyContext)

    return (
        <div className="App">
            <Card>
                <DataTable
                    title="Table 2.27: Department wise profile of incomplete projects which are more than one crore as on 31 March 2020(` in crore)"
                    columns={columns}
                    data={ctx.reportData.Tables.Table}
                    customStyles={customStyles}
                />
            </Card>
        </div>
    );
}

export default Table;

在上面的代码片段中，除了 width 属性之外，其余的 CSS 属性都可以正常工作。

我得到了什么与我想要的

我错过了什么以及为什么 width 属性不起作用？

4

0 回答 0