Я пытаюсь использовать Material UI для создания простого заголовка, нижнего колонтитула и страницы профиля.
Всякий раз, когда я пытаюсь отобразить какой-либо элемент (Меню, Панель приложений, Панель инструментов, Иконка, Вкладка, Вкладки и т. Д. c.), На странице вместо самого элемента отображается загар. См. Pi c для примера - изображение коричневых полей : слева направо должны быть кнопка со значком, кнопка входа в систему и 3 вкладки с надписью Item 1, 2 или 3).
Функциональность работает отлично. Я могу добавить ссылки на новые страницы, когда нажимаю кнопку. Я просто не вижу кнопку или ее текст.
Вот как выглядит компонент Header:
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Profile from './Auth/Profile.jsx'
const Header = () => {
return(
<div >
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" >
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Profile/>
</div>
)
}
export default Header;
Вот компонент Profile:
import React from 'react';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
export default function Profile() {
return (
<Paper >
<Tabs
value={0}
indicatorColor="primary"
textColor="primary"
centered
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</Paper>
);
}
I Я не уверен, что мне не хватает в моем коде, но я не могу удалить это наложение из моих элементов. Любая помощь приветствуется!
Для получения дополнительной информации -
Вот мой индекс. html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>KYODIE</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" src="assets/css/styles.scss">
</head>
<body>
<!-- Hang React App Here -->
<div id="root"></div>
<!-- script for webpack and webpack-dev-server -->
<script src="build/bundle.js"></script>
</body>
</html>
И мой индекс. js -
/* Modules */
import React from 'react';
import { render } from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
/* Assets */
import '../css/styles.scss';
import '../images/working_together.png';
import 'typeface-roboto';
/* Components */
import App from '../../Components/App.jsx';
import ResultsPage from '../../Components/Results/ResultsPage.jsx';
import ResultsDetails from '../../Components/Results/ResultsDetails.jsx';
import About from '../../Components/About.jsx';
import Contact from '../../Components/Contact.jsx';
import Forum from '../../Components/Forum/Forum.jsx';
import Login from '../../Components/Auth/Login.jsx';
import SignUp from '../../Components/Auth/SignUp.jsx';
import Profile from '../../Components/Auth/Profile.jsx';
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/searchSubmit" component={ResultsPage} />
<Route path="/resultsDetails" component={ResultsDetails} />
<Route path="/api/forum/:id" component={Forum} />
<Route path="/login" component={Login} />
<Route path="/signup" component={SignUp} />
<Route path='/profile' component={Profile} />
</div>
</Router>
);
render(
<div>
{routing}
</div>
,
document.getElementById('root')
);
Кроме того, я закомментировал все в своем файле css, чтобы убедиться, что он не влияет на мой код здесь.