React Tsx 与 React Bootstrap - Active NavItem 的内联 CSS答案

【问题标题】：React Tsx with React Bootstrap - Inline CSS for Active NavItemReact Tsx 与 React Bootstrap - Active NavItem 的内联 CSS
【发布时间】：2017-10-16 14:05:05
【问题描述】：

我想使用内联 CSS 将 active NavItem 元素的背景颜色更改为绿色。我正在使用 TypeScript 2.2、React、React Bootstrap、React Router Dom 和 React Router Bootstrap。这是可能的还是我需要创建一个 CSS 类？

https://react-bootstrap.github.io/components.html#navigation

当前代码：

const tabStyle: React.CSSProperties = {
    backgroundColor: 'green'
}

return (
    <main>
        <div>
            <Nav bsStyle="tabs" activeKey="1">
                <LinkContainer to="/about">
                    <NavItem eventKey="1">Om</NavItem>
                </LinkContainer>
                <LinkContainer to="/facts">
                    <NavItem eventKey="2">Fakta</NavItem>
                </LinkContainer>
            </Nav>
        </div>
    </main>
);

【问题讨论】：

为了更改 Nav 的 css 属性，您需要为 nav 类编写自定义 css。通过正常的引导类参考，然后添加您的自定义样式并导入它们。那应该可以，Nav 不提供使用自定义样式属性的选项，因此我认为您不能通过内联 css 来做到这一点

标签： css twitter-bootstrap reactjs typescript react-bootstrap

【解决方案1】：

这样解决，不是最漂亮的解决方案，但效果很好。

const css = `
    .route-list .nav-tabs>li.active>a {
        background-color: green;
        color: white;
    }
`

<main>
    <div className="route-list">
        <style>{css}</style>
        <Nav bsStyle="tabs" activeKey="1">
            <LinkContainer to="/about">
                <NavItem eventKey="1">Om</NavItem>
            </LinkContainer>
            <LinkContainer to="/facts">
                <NavItem eventKey="2">Fakta</NavItem>
            </LinkContainer>
        </Nav>
    </div>
</main>

【讨论】：

【解决方案2】：

据我所知，您没有使用道具，而且道具是不可变的。您可能想查看state 并将其用作backGroundColor，但对于内联样式，它可能看起来像这样

 <div style={{color: condition ? "red": "green"}}> </div>

编辑：似乎没有为NavItem 设计的样式。见here。您必须为此使用 css，例如Change the <a> element class in react-bootstrap NavItem

【讨论】：

NavItem 没有样式属性。如果我尝试将其包装在 span 或 div 中，则 NavItem 会出现在导航栏之外。
@Ogglas 看来您必须使用 CSS。查看我的编辑。
是的，这似乎是最简单的选择