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

Question

I think, it might be silly question to ask but trust me I have case where I want to insert new css property to existing css file ( which are already imported ). I tried very hard but didn't find any solution to resolve this solution. Could someone please help me in this issue.

Thanks

Answer 1

This is how you can pass extra styles to the component separately. :

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

here is how you can conditionally pass the specific classname as your specified in the comments section, and use that class name to set the custom styles:

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>
  );
}

Here is how the css styles for redClass and greenClass looks:

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

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

body {
  background-color: aqua;
}

Codesandbox Example