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

【问题标题】：Restyling Bootstrap Components with React/Typescript styled components使用 React/Typescript 样式的组件重新设置 Bootstrap 组件的样式
【发布时间】：2021-06-16 05:47:39
【问题描述】：

我有来自引导程序的菜单栏，但我想更改一些颜色，例如按钮样式。

import Button from 'react-bootstrap/Button';

              <Header__Button>
                    Something
                </Header__Button>

const Header__Button = styled(Button)`
    color: '#003D58';
    background: 'transparent';
`;

这是我的方法，但它不起作用。处理这个问题的正确方法是什么？

【问题讨论】：

标签： reactjs components styles react-bootstrap styled-components

【解决方案1】：

你可以这样做，

const styles = css `
   .custom-button {
    color: '#003D58';
    background: 'transparent';
}`;

<div css={styles}>
  <Button className='custom-button'>Hello</Button>
</div>

【讨论】：

{styles} 在我的示例中应用在哪里？

【解决方案2】：

styled-components 包使用的语法与在 CSS 样式表中使用的语法相同，而不是在 Javascript 对象中使用的语法。所以你不想在值周围使用引号。删除它们将解决它：

import Button from "react-bootstrap/Button";
import styled from "styled-components";

const Header__Button = styled(Button)`
    color: #003D58;
    background: transparent;
`;

【讨论】：