如何在JSS中将样式应用于子类

Question

我正在使用React，带有JSS和React Router的Material UI。

我正在加入<NavLink>来应用活动类，例如：

<NavLink to={'/dashboard'} activeClassName={classes.active}
 <button className={classes.btn}>Link</button>
/>

该类可以很好地添加到父类中，但是如果这是一个类，则在将样式应用于子按钮时遇到了问题。定位元素时，它起作用了，但不适用于类。

我已经考虑使用nested JSS，但这仍然行不通。有任何想法吗？

  active: {
    '& .btn': { // This doesn't work
      backgroundColor: '#2A354F'
    },
   '& button': { // This works
      backgroundColor: '#2A354F'
    }  
  }

Answer 1

如果 _fireBaseMessaging.getToken().then((token){ _myPhoneToken = token; }); 是通过JSS定义的另一个类，则需要使用btn来引用它。

请参见JSS文档的this part。

以下一些有效的示例代码：

$btn

Answer 2

由于类名“ .btn”而无法使用，因为在渲染React之后，根类“ active”将没有相同的类名，并且无法找到它。

只需设置{classes.btn}

<button className={classes.btn}>Link</button>