如何在使用 classNames 和 JSX 的 reactjs 项目中使用 css 模块设置 children 的样式

Question

我正在使用 React JS 建立一个项目，并希望使用 auth0 来处理身份验证（可能还有一些无服务器功能）。

auth0 提供了一个很好的 "seed" 项目 https://github.com/auth0-samples/auth0-react-sample，它基本上开箱即用。

主容器的代码使用 JSX 并从模块文件加载 css 样式。模块文件提供了用于样式化的类名类。

我正在使用 React-Bootstrap 组件扩展 bootstrap 布局，并且能够使用 classNames 语法设置一些组件的样式。

例如，我将 Navbar 的背景颜色设置为这样：

附加到 css 模块文件 /01-Login/src/views/Main/styles.module.css

.mainNavBar{
        background-color: rgb(45, 140, 210);                                                    
        border-color: rgb(45, 140, 210);                                                        
}

然后到包含JSX的文件01-Login/src/views/Main/Container.js

<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>

然而，当我尝试设置其他内部元素的样式时，即文本颜色，

我试过：

.mainMenuItem { 
        color: #fff;
}

并且：

 <NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>

没用。我想是因为我不知道如何到达NavItem的children。

我尝试了这个及其变体：

.mainMenuItem ul > li > a { 
        color: #fff;
}

但这似乎不是正确的方法，也行不通（虽然 'li' 项目在浏览器上检查时在某个时候用颜色设置了样式，但是不是 'a' ...).

最后，我尝试了内联样式（参见相关问题），但这似乎遇到了同样的继承问题。

非常感谢你能在我困惑的时候指出正确的方向。

编辑 2016 年 7 月 19 日

看起来 NavItem 没有获取样式元素...

我向 react-bootstrap 提交了一个问题： https://github.com/react-bootstrap/react-bootstrap/issues/2070

Answer 1

我使用 javascript 语法和 Radium 的内联样式，而不是通过 "Classname" 属性传递标准 css。

如何在使用 classNames 和 JSX 的 reactjs 项目中使用 css 模块设置 children 的样式

How do I set the style of children using css modules in a reactjs project using classNames and JSX

css

twitter-bootstrap

reactjs

react-jsx

auth0