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

问题描述

今天，我正在制作自己的创业公司（我是数据科学家而不是Frontend-Dev）的着陆页。我的总体文件夹配置如下所示

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

我偶然发现使用下面的代码制作{/src/containers/contactform/index.js）。函数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元素时，它改变了我的大多数着陆页按钮。我不明白的是，我在<button>中找不到任何/src/containers/contactform/index.js元素。我假设<button>元素隐式嵌入在<form>内部。因此，当要使其在本地仅在<button>表单上仅对我的js文件起作用时，我找不到仅在contactform中更改按钮的方法。

解决方法

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

这是CSS的定义。

CSS适用于整个DOM-这就是CSS的本质。将其导入代码中的某个位置后，如果与类匹配，则它将应用于整个页面，因为默认行为是导入全局空间。导入CSS只是将该CSS包含在输出css文件中（或将js文件内联（如果已配置）在内）。

有一些变通方法可以根据需要在本地创建CSS ：

。 CSS Modules

。 styled-components

*此article对您可能有用。

forms forms forms frontend reactjs reactjs reactjs reactjs rest rest