如何在 React Form 中定义 CSS 样式而不使其成为全局样式？

Question

今天，我正在为自己的初创公司制作登录页面（我是数据科学家而不是前端开发人员）。我的整体文件夹配置如下所示

/src
├── pages
│   ├── index.js
│   ├── 404.js
├── containers
│   ├── contactform
│       ├── index.js
│       ├── styles.js
│       ├── errorMessage.js

我偶然发现使用下面显示的代码 (/src/containers/contactform/index.js) 制作了一个 React 表单。函数ContactForm导出到/src/pages/index.js

import React from "react";
// import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import ErrorMessage from "./errorMessage";
import "./styles.css";

function ContactForm() {
  const {
    register,
    handleSubmit,
    errors,
    // setError,
    // clearError,
    formState: { isSubmitting }
  } = useForm();
  const onSubmit = data => {
    // alert(JSON.stringify(data));
      
    fetch("https://myapi.com/sendmessage", {
              method: 'post',
              headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(data)
            })

    
  };


  return (
    <form id="form" className="contact" onSubmit={handleSubmit(onSubmit)}>
      <h1 id="contactus" className="contactheader">Contact Us - We will reach you</h1>
      <label className="contactlabel">First Name:</label>
      <input className="contactinput" name="firstname" ref={register({ required: true })} />
      <ErrorMessage error={errors.firstName} />

      <label className="contactlabel">Last Name:</label>
      <input className="contactinput" name="lastname" ref={register({ required: true, minLength: 2 })} />
      <ErrorMessage error={errors.firstName} />

      <label className="contactlabel">Email</label>
      <input className="contactinput" 
        name="email"
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}
      />
      <ErrorMessage error={errors.email} />

      <label className="contactlabel">Phone / Whatsapp</label>
      <input className="contactinput" name="phone" ref={register({ required: false })} />
      <ErrorMessage error={errors.phone} />

      <label className="contactlabel">Tell Us About your Current Need</label>
      <textarea className="contacttextarea" name="message" ref={register} />

      <input className="contactinput" disabled={isSubmitting} type="submit" />
    </form>
  );
}

// const rootElement = document.getElementById("root");
// ReactDOM.render(<App />, rootElement);


export default ContactForm;

/src/containers/contactform/styles.css 如下所示

/* body {
  background: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
} */

form.contact {
  max-width: 500px;
  margin: 0 auto;
}

h1.contactheader {
  font-weight: 100;
  color: black;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(79, 98, 148);
}

/* .form {
  background: #0e101c;
  max-width: 400px;
  margin: 0 auto;
} */

p.errormessage {
  color: #bf1650;
}

p.errormessage::before {
  display: inline;
  content: "⚠ ";
}

input.contactinput {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 1px solid black;
  padding: 10px 15px;
  margin-bottom: 10px;
  font-size: 14px;
}

label.contactlabel {
  line-height: 2;
  text-align: left;
  display: block;
  margin-bottom: 13px;
  margin-top: 20px;
  color: black;
  font-size: 14px;
  font-weight: 200;
}

button[type="submit"].contactinput,
input[type="submit"].contactinput {
  background: #ec5990;
  color: white;
  text-transform: uppercase;
  border: none;
  margin-top: 40px;
  padding: 20px;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 10px;
}

button[type="submit"].contactinput:hover,
input[type="submit"].contactinput:hover {
  background: #bf1650;
}

button[type="submit"].contactinput:active,
input[type="button"]:active,
input[type="submit"].contactinput:active {
  transition: 0.3s all;
  transform: translateY(3px);
  border: 1px solid transparent;
  opacity: 0.8;
}

input:disabled {
  opacity: 0.4;
}

input[type="button"]:hover {
  transition: 0.3s all;
}

button[type="submit"].contactinput,
input[type="button"],
input[type="submit"].contactinput {
  -webkit-appearance: none;
}

.contact {
  max-width: 600px;
  margin: 0 auto;
}

button[type="button"] {
  display: block;
  appearance: none;
  background: #333;
  color: white;
  border: none;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
}

/* hr {
  margin-top: 30px;
} */

button[type="button"] {
  display: block;
  appearance: none;
  margin-top: 40px;
  border: 1px solid #333;
  margin-bottom: 20px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
}

textarea.contacttextarea,
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 1px solid F5EEFF;
  padding: 10px 15px;
  margin-bottom: 10px;
  font-size: 14px;
}

我想让我的/src/containers/contactform/style.css 仅在我的/src/containers/contactform/index.js 中有效，而不是全局更改我的主登录页面。到目前为止，我已经为每个元素添加了className，但是当涉及到button 元素时，它会改变我的大部分登录页面按钮。我不明白的是我在/src/containers/contactform/index.js 中找不到任何<button> 元素。我假设<button> 元素隐式嵌入在<form> 中。因此，当要使其在本地仅适用于我的 js 文件，特别是在 <button> 表单上时，我无法找到仅在我的联系人表单中更改按钮的方法。

Answer 1

这是 CSS 工作原理的定义。

CSS 适用于整个 DOM - 这是 CSS 的本质。一旦你在代码中的某个地方导入了它，如果它与类匹配，它就会应用于整个页面，因为默认行为是导入到全局空间中。导入 CSS 只是将 CSS 包含在输出的 css 文件中（或内联在您的 JS 文件中，如果这样配置）。

有一些解决方法可以根据需要本地制作 css：

。 CSS Modules

。 styled-components

*这个article 可能对你有用。

Answer 2

如果我正确理解了您的问题，您可以将 index.js 和 styles.css 放在与 src 或 public 的子文件夹相同的文件夹中。然后我假设默认情况下其他文件将无法从styles.css 访问该css 功能。