Question

如何在React中使用接下来的2个CSS示例来完全按照我在普通CSS/HTML中所做的操作，但不使用danerouslySetInnerHTML：

@media (max-width: 600px) {
    .main {
        border-radius: 0px;
    }
}

.un:active, .pass:active {
    border: 2px solid rgba(0, 0, 0, 0.18) !important;
}

我确实尝试过搜索这两个案例，但没有任何东西可以解决。

编辑：幕后还有更多CSS，我想将CSS和HTML转换为React组件。问题是我不知道如何将媒体查询从普通CSS转换为React。我希望将该媒体查询应用于整个组件。我知道一般如何将CSS转换为React，但是当存在媒体查询和分组选择器并且我不知道如何将React中的那些转换时，我会遇到这种特殊情况（我还是React的新手）组件仅用于该组件。

Answer 1

danerouslySetInnerHTML不是向CSS应用程序添加react的正确方法，有很多添加CSS的方法，例如我使用{{1} }预处理器，例如PostCSS，Less，Sass，SCSS以及许多其他可以使用它们的方式，但是只是想运行一个测试，制作一个JSS标签，然后将这两个style放入其中，您的浏览器绝对会发现它，并向您显示简单的CSS这样的结果。

执行以下代码：

HTML/CSS

并将其放在您的代码中。毫无疑问，它有效。

但是随着您对问题的更多解释和编辑，我了解您需要<style> @media (max-width: 600px) { .main { border-radius: 0px; } } .un:active, .pass:active { border: 2px solid rgba(0, 0, 0, 0.18) !important; } </style>进行工作，有关更多信息，请访问this link

您可以在JSS应用程序内部使用，而无需花费太多时间。您可以根据需要将react对象准备为CSS对象：

JavaScript

然后在您的const viewPortSizes = { height: "100vh", width: "100vw", };标签中使用它。

希望它对您有帮助。

ReactJS中的CSS-媒体查询和分组选择器

1 个答案: