小编Meh*_*d77的帖子

我有看起来像这样的旧 CSS：

.btn_1 {
    color: #fff;
    background: #004dda;
    display: inline-block;
}
.btn_1:hover {
  background-color: #FFC107;
  color: #222 !important;
}
.btn_1.full-width {
  display: block;
  width: 100%;
}

我想迁移到在 React 中使用样式组件（CSS-in-JS 样式）。

到目前为止，这是我的迁移：

.btn_1 {
    color: #fff;
    background: #004dda;
    display: inline-block;
    :hover {
        background-color: #FFC107;
        color: #222 !important;
    }
}

但是在样式化组件中是否有针对选择器的解决方案，.btn_1.full-width或者我应该为此创建另一个 CSS 块？

我认为做这样的事情（或更好）会很酷：

.btn_1 {
    ${this}.full-width {
        display: block;
        width: 100%;
   }
}

但我似乎无法在文档中找到解决方案。你知道这是怎么可能的，或者这甚至是一个好主意吗？