使用 Typescript 样式组件重新设置 Bootstrap 样式答案

【问题标题】：Restyling Bootstrap with Typescript styled component使用 Typescript 样式组件重新设置 Bootstrap 样式
【发布时间】：2021-06-17 17:41:22
【问题描述】：

我基本上从 React Bootstrap 复制了整个导航栏。我在我的应用程序中使用 Typescript 的样式化组件，但实际上我不知道如何从 Bootstrap 重新设置默认样式。

示例（React Bootstrap 导航栏）：

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#link">Link</Nav.Link>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

当然，每个组件都必须从 Bootstrap 导入，例如

import Navbar from 'react-bootstrap/Navbar';

所以我不能从我的 style.ts 中再次导入它，我通常会在那里设置它的样式。如果我会使用 css，那么我当然会给它一个 className 和基于它的样式，但这是完全不同的系统，我是新来的。

有什么方法可以自定义 Bootstrap 吗？

我也尝试过 React 样式 style={{color: "pink"}} 在元素中实现，例如 Nav.Link，但显然它不起作用。

【问题讨论】：

标签： reactjs typescript react-bootstrap styled-components

【解决方案1】：

尝试单独导入导航栏元素：

import {Link, Brand, etc..} from '...'

然后你可以用这样的样式组件来装饰这个组件：

const CustomNavLink = styled(Link)` ...props `

【讨论】：

Hej @Dániel，当我尝试单独导入元素时，它不喜欢它并抛出错误....
@Katie 我试过了，你可以按照原来的方式导入： import Navbar from 'react-bootstrap/Navbar' 然后 const CustomNavLink = styled(Navbar.Brand)`` 使用这种形式。