[英]React material-table - center table title
我在我的反应项目中使用材料表。
我怎样才能使表格标题居中?
这是代码沙盒示例:
https://codesandbox.io/s/silly-hermann-6mfg4?file=/src/App.js
我想让标题“平均费用比率”居中:
我尝试使用textAlign:"center"向MaterialTable添加样式道具,但它不起作用。 甚至有可能做到吗?
如果需要,您可以覆盖工具栏组件并提供自定义标题反应组件。
import "./styles.css";
import MaterialTable, { MTableToolbar } from "material-table";
import Typography from "@material-ui/core/Typography";
const MyNewTitle = ({ text, variant }) => (
<Typography
variant={variant}
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
{text}
</Typography>
);
export default function App() {
const softRed = "#CC6666";
//GREENS
const forestgreen = "#556B2F";
const limegreen = "#228B22";
const lightgreen = "#3CB371";
//ORANGES
const softOrange = "#ffd27f";
return (
<div className="App">
<MaterialTable
style={{}}
title={<MyNewTitle variant="h6" text="Average Expense Ratio" />}
components={{
Toolbar: (props) => (
<div
style={{
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
>
<MTableToolbar {...props} />
</div>
)
}}
columns={[
{
title: "0.19 and below",
field: "first",
headerStyle: {
backgroundColor: forestgreen
}
},
{
title: "0.20 to 0.48",
field: "first",
headerStyle: {
backgroundColor: limegreen
}
},
{
title: "0.49 to 0.77",
field: "first",
headerStyle: {
backgroundColor: lightgreen
}
},
{
title: "0.78 to 1.06",
field: "first",
headerStyle: {
backgroundColor: softOrange
}
},
{
title: "1.07 and above",
field: "first",
headerStyle: {
backgroundColor: softRed
}
}
]}
data={[]}
options={{
headerStyle: {
color: "#FFF",
textAlign: "center",
whiteSpace: "nowrap",
fontSize: 10
},
paging: false,
search: false,
sorting: false,
showEmptyDataSourceMessage: false
}}
/>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.