如何在React中使用CSS模块以多种方式对同一组件进行样式设置？

Question

我最近刚在项目中使用CSS模块，这引起了一些问题。

在下面的简单代码示例中，我正在创建一个输入组件，希望在创建表单时将其重新用作表单字段。当我希望能够在某些情况下以不同的方式设置输入组件的样式时，就会出现问题。

FormInput.js

const FormInput = props => (
  <FormControl>
    <InputLabel>{props.label}</InputLabel>
    <Input />
  </FormControl>
);

Form.js

import React from 'react';
import Button from '@material-ui/core/Button';
import Input from './input';

const Form = () => (
  <form>
    <Input label="Name" />
    <Button> Submit </Button>
  </form>
);

我知道可以使用样式化组件来完成，但是我确实在寻找使用CSS模块的解决方案。任何帮助将不胜感激

Answer 1

所以我在上面解释的是传递一个唯一的id作为prop，然后您需要使用模板文字将其附加到Input组件中的现有类名称上。

FormInput.js

const FormInput = props => (
  <FormControl>
    <InputLabel>{props.label}</InputLabel>
    <Input uniqueClass='unique-class'/>
  </FormControl>
);

Form.js

import React from 'react';
import Button from '@material-ui/core/Button';
import Input from './input';

const Form = () => (
  <form>
    <Input uniqueClass='unique-class' label="Name" />
    <Button> Submit </Button>
  </form>
);

Answer 2

您可以简单地导入css并将其作为int main(void) { student* students[NUMBER_OF_STUDENTS]; strcpy(students[0]->name, "test"); strcpy(students[0]->surname, "test"); students[0]->grade = 18; return EXIT_SUCCESS; } 传递给prop。在这种情况下，您可以将其传递为Input。

注意：正如您将在下面注意到的那样，在样式化嵌套元素和伪元素时，className可能有点多余，这就是为什么我强烈推荐SASS（{{1} }或CSS）（预处理后的样式表（后处理会将scss样式表转换为普通的less样式表）。

工作示例（重复使用SASS，但使用不同的CSS设置样式）：

---

组件/输入（它接受Input字符串，classes函数（必需），className字符串，onChange字符串（必需） ，以及一个label字符串）

name

styles.css （对于value，您需要使用import React from "react"; import PropTypes from "prop-types"; const Input = ({ className, onChange, label, name, value }) => ( <div className={className}> <label htmlFor={name}>{label}: </label> <input value={value} onChange={onChange} name={name} type="text" /> </div> ); // PropTypes ensures that passed down props adhere to the type checking // rules defined below Input.propTypes = { className: PropTypes.string, onChange: PropTypes.func.isRequired, label: PropTypes.string, name: PropTypes.string.isRequired, value: PropTypes.string }; export default Input; 而不是camelCase）

snake-case

组件/应用（className的所有.appContainer { text-align: center; padding: 20px; } input { height: 40px; vertical-align: middle; display: inline-block; border: 0 none; padding: 0 10px; background: #fff; color: #666; border: 1px solid #e5e5e5; transition: 0.2s ease-in-out; transition-property: color, background-color, border; font-size: 15px; } .nameField { font-weight: bold; color: blue; margin-bottom: 20px; } .nameField > input { color: green; } .emailField { font-weight: bold; color: red; margin-bottom: 20px; } .emailField > input { color: blue; } .resetButton { cursor: pointer; background-color: transparent; color: #222; border: 1px solid #e5e5e5; margin: 0; overflow: visible; box-sizing: border-box; padding: 0 30px; vertical-align: middle; font-size: 14px; line-height: 38px; text-align: center; text-decoration: none; text-transform: uppercase; transition: 0.1s ease-in-out; transition-property: color, background-color, border-color; } .resetButton:hover { background-color: transparent; color: #222; border-color: #b2b2b2; } .resetButton:focus { outline: none; } 为import，并根据需要应用它们-您也可以使用ES6 destructuring拔出单个类，例如： css）

classes