У меня есть приложение React, которое было создано с использованием create-реагировать-app-ts.Я добавил для своей навигации boostrap, response-bootstrap, однако, похоже, что bootstrap css не включен, т.е. ни одна из ссылок не имеет какого-либо стиля по сравнению со стилем, который появляется в версии .js.Кроме того, кажется, что все .TSXs работают правильно.
Если я добавлю этот импорт в мой NavMenu.tsx, он будет корректно стилизован, но это будет слишком большой взлом для решения.
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import '../../node_modules/bootstrap/dist/css/bootstrap-theme.css'
Я предполагаю, что какая-то часть начальной загрузки / реакции-начальной загрузки загружается неправильно ??
package.json:
{
"name": "test-react-21w-ts3",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts-ts": "3.1.0",
"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.8",
"bootstrap": "^3.3.7",
"react-bootstrap": "^0.31.5",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/jest": "^23.3.2",
"@types/node": "^10.11.3",
"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.8",
"typescript": "^3.1.1"
}
}
NavMenu.tsx:
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';
export class NavMenu extends React.Component {
displayName = NavMenu.name
render() {
return (
<Navbar inverse fixedTop fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to={'/'}>TestReact21wTS4</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to={'/'} exact>
<NavItem>
<Glyphicon glyph='home' /> Home
</NavItem>
</LinkContainer>
<LinkContainer to={'/counter'}>
<NavItem>
<Glyphicon glyph='education' /> Counter
</NavItem>
</LinkContainer>
<LinkContainer to={'/fetchdata'}>
<NavItem>
<Glyphicon glyph='th-list' /> Fetch data
</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
);