如何通过reactjs在css文件中添加新的css属性答案

【问题标题】：How to add new css property in css file through reactjs如何通过reactjs在css文件中添加新的css属性
【发布时间】：2021-03-13 01:53:06
【问题描述】：

我认为，这可能是一个愚蠢的问题，但相信我，我想将新的 css 属性插入到现有的 css 文件（已导入）中。我非常努力，但没有找到任何解决方案来解决这个问题。有人可以帮我解决这个问题。

谢谢

【问题讨论】：

你能举个例子吗？
实际上，我有一个简单的 css 文件，其中包含某种 css 属性。假设我有 8 个 css 属性，我想根据条件插入新的 css 属性。插入新属性后，将计算总属性 (9)。有可能吗？
我认为你不能用简单的 css 做到这一点，但用 sass 是可能的。你为什么要这样做？我看不出与 react.js 有任何关系。
是的，SASS 会好的。实际上，我的应用程序中有一个案例，我想在满足条件时插入新属性。
假设有一个名为<HomeScreen style={styles.homecomtainer}/> 的组件现在您还想使用将一些额外的样式传递给组件吗？这是用例吗？

标签： javascript reactjs ecmascript-6 sass

【解决方案1】：

这是您可以单独将额外样式传递给组件的方式。：

// react native example
<HomeScreen style={[styles.homeContainer, {width: 100, color: "red"}]}/>

您可以通过以下方式有条件地传递您在 cmets 部分中指定的特定类名，并使用该类名来设置自定义样式：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [red, setRed] = useState(true);
  return (
    <div className={red ? "redClass" : "greenClass"}>
      <p>hello</p>
      <button onClick={() => setRed(!red)}>Change Color</button>
    </div>
  );
}

redClass 和 greenClass 的 css 样式如下所示：

.redClass {
  width: 100px;
  height: 100px;
  background-color: red;
}

.greenClass {
  width: 100px;
  height: 100px;
  background-color: green;
}

body {
  background-color: aqua;
}

Codesandbox Example

【讨论】：

我正在使用库，如何根据条件覆盖它的 CSS ？
是否可以使用内联样式覆盖css类？
<HomeScreen style={[styles.homeContainer, conditionIsTrue?{width: 100, color: "red"}:null]}/>
这是传递条件样式的方法。
我想覆盖 CSS 类名，比如 style = {{'classname':'new-class'}}