宽度：“fit-content”在 react-data-table-component

问题描述

我正在使用 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 属性都工作正常。

我得到的与我想要的

我缺少什么以及为什么宽度属性不起作用？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）