我正在按照教程在 React 中使用 fluentui 构建仪表板，然后将对其进行自定义和更改。但是，我完全按照教程进行操作，没有出现任何错误，但由于某种原因，卡片和表格出现在屏幕底部，看起来不像它们的样式，并且表格中没有数据。
我的代码与此处的教程完全相同：https ://www.youtube.com/watch?v=P9s6dsdu_9c 。我将在下面发布一个屏幕截图，说明我的 atm 外观以及下面的所有相关代码。
代码：App.js
import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import './App.css';
import 'office-ui-fabric-react/dist/css/fabric.css';
import Chart3 from './Components/Chart/Chart3';
import Jumbo from './Components/Jumbotron/Jumbotron';
import Footer from './Components/Footer/Footer';
import Header from './Components/Navbar/Navbar';
import Navigation from './Navigation/Navigation';
import CardsSection from './Components/Cards/Card';
import Table from './Components/Table/Table';
function App() {
return (
<div className="ms-grid" dir="ltr">
<div className="ms-grid-row">
<div className="ms-grid-col ms-sm1 ms-xl1">
<Navigation />
</div>
<div className="ms-Grid-col ms-sm11 ms-xl11 main-element">
<div className="ms-Grid-row">
<CardsSection />
</div>
<div className="ms-Grid-row">
<Table />
</div>
</div>
</div>
</div>
);
}
export default App;
导航.js
import React from 'react';
import {Nav, initializeIcons} from '@fluentui/react';
const Links = [
{
links: [
{
name: 'Dashboard',
url: '/',
key: 'key1',
iconProps: {
iconName: 'News',
styles: {
root: {
fontSize: 20,
color: '#106ebe'
}
}
}
},
{
name: 'Settings',
url: '/',
key: 'key2',
iconProps: {
iconName: 'SwitcherStartEnd',
styles: {
root: {
fontSize: 20,
color: '#106ebe'
}
}
}
},
{
name: 'Charts',
url: '/',
key: 'key3',
iconProps: {
iconName: 'StackedLineChart',
styles: {
root: {
fontSize: 20,
color: '#106ebe'
}
}
}
}
]
}
]
//Styling for the navigation
const navigationStyles = {
root: {
height: '100vh',
boxSizing: 'border-box',
border: '1px solid',
overFlowY: 'auto',
paddingTop: '10vh'
}
}
const Navigation = () => {
initializeIcons(); //initalizing so we can see icons when we use them
return (
<Nav
groups={Links}
selectedKey="key1"
styles={navigationStyles}
/>
)
}
export default Navigation;
Card.js
import React from 'react';
import { Card } from '@uifabric/react-cards';
import { Text, initializeIcons} from '@fluentui/react';
import 'office-ui-fabric-react/dist/css/fabric.css';
const container = {
display: 'flex',
justifyContent: 'center',
margin: '10vh 0'
}
const icon = {
fontSize: 24,
padding: 15,
verticalAlign: 'middle',
paddingLeft: 0,
color: '#0078d4'
}
const styles = {
cardStyles: {
root: {
backgroundColor: 'white',
padding: 20,
borderTop: '5px solid #0078d4',
width: '90%',
maxWidth: '90%',
margin: 'auto'
}
},
header: {
root: {
fontSize: 20,
fontWeight: 'bold',
}
},
amount: {
root: {
fontSize: 26,
paddingBottom: 20,
paddingTop: 30,
}
},
amount: {
root: {
fontSize: 16,
fontWeight: 'bold',
color: '#0078d4'
}
}
}
const cards = [
{
title: 'current balance',
amount: '21',
icon: 'Money',
percentage: '2.3',
},
{
title: 'current expenses',
amount: '215',
icon: 'PaymrntCard',
percentage: '2.3',
},
{
title: 'current income',
amount: '21',
icon: 'Savings',
percentage: '2.3',
},
]
const CardsSection= () => {
initializeIcons();//initailizing icons so can be used
return (
<div style={container}>
{cards.map((card) => (
<div className="s-Grid-col ms-sm3 ms-xl3">
<Card styles={styles.cardStyle}>
<Card.Section>
<Card.Item>
<i style={icon} className={`ms-Icon ms-Icon--${card.icon}`} aria-hidden="true"></i>
<Text styles={styles.header}>{card.title}</Text>
</Card.Item>
<Card.Item>
<Text styles={styles.amount}>{card.amount}</Text>
</Card.Item>
<Card.Item>
<Text styles={styles.percentage}>{card.percentage}%</Text>
</Card.Item>
</Card.Section>
</Card>
</div>
))}
</div>
)
}
export default CardsSection;
表.js
import React from 'react';
import { DetailsList } from '@fluentui/react';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import 'office-ui-fabric-react/dist/css/fabric.css';
const operations = [
{
from: '0000 0284 7529 304304',
to: '0000 9876 9876 5678 4123',
amount: '1.343',
date: '20-05-2020'
},
{
from: '0000 0284 7529 304304',
to: '0000 9876 9876 5678 4123',
amount: '1.343',
date: '20-05-2020'
},
{
from: '0000 0284 7529 304304',
to: '0000 9876 9876 5678 4123',
amount: '1.343',
date: '20-05-2020'
},
{
from: '0000 0284 7529 304304',
to: '0000 9876 9876 5678 4123',
amount: '1.343',
date: '20-05-2020'
},
{
from: '0000 0284 7529 304304',
to: '0000 9876 9876 5678 4123',
amount: '1.343',
date: '20-05-2020'
}
]
const columns = [
{ key: 'column1', name: 'From', fieldName:'From', minWidth: 100, maxWidth: 300, isResizable: true },
{ key: 'column2', name: 'To', fieldName:'To', minWidth: 100, maxWidth: 300, isResizable: true },
{ key: 'column3', name: 'Amount', fieldName:'Amount', minWidth: 100, maxWidth: 300, isResizable: true },
{ key: 'column4', name: 'Date', fieldName:'Date', minWidth: 100, maxWidth: 300, isResizable: true },
]
const classNames = mergeStyleSets({
teble: {
margin: 'auto'
}
});;
const Table = () => {
return (
<div data-is-scrollable={true}>
<div className={`s-Grid-col ms-sm9 ms-xl9 ${classNames.table}`}>
<DetailsList
items={operations}
columns={columns}
selectionMode={0}
/>
</div>
</div>
)
}
export default Table