React TsxとReact Bootstrap - Active NavItemのインラインCSS

Question

active NavItem要素の背景色をインラインCSSを使用して緑色に変更したいと思います。私は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> 
); 

Answer 1

あなたは私の知る限り小道具は不変であることを確認し、ほかにできるよう小道具を使用していません。あなたはstateに見て、backGroundColorとしてではなくインラインスタイリングのために、それはこの

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

EDITのように見えることができることを使用する場合があります：NavItemためのもの何スタイリングがないように思えます。 hereを参照してください。あなたはそれのためにCSSを使用する必要があります。 Change the <a> element class in react-bootstrap NavItem

Answer 2

このように解決しましたが、これは最高の解決策ではなく、うまく機能します。

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>