如何在反应中设置标签的背景颜色？

Question

请问如何设置label的背景颜色反应？我正在使用来自 here.

的 react. + material ui

Here 是否存在在 js 中写入 CSS 的概念，当您滚动页面时，可用的插件很少 jss-nested 正在使用我尝试制作的示例label 颜色为红色或背景颜色为红色，但我做不到。

Here 是我的代码。

我执行以下步骤：

import JssProvider from "react-jss/lib/JssProvider";
import jssNested from "jss-nested";
import { create } from "jss";
import { createGenerateClassName, jssPreset } from "@material-ui/core/styles";

const styleNode = document.createComment("jss-insertion-point");
document.head.insertBefore(styleNode, document.head.firstChild);

const generateClassName = createGenerateClassName();
const jss = create({
  ...jssPreset(),
  plugins: [...jssPreset().plugins, jssNested()],
  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
  insertionPoint: "jss-insertion-point"
});

在 test.js 为了使背景变红，我使用了这段代码

const styles = {
  formControl: {
    width: "100%", 
    '& .label': {
      background: 'red'
    },
    // Use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  },

但是这段代码不起作用。检查我的屏幕截图我想将 label 背景设为红色

不想在输入字段中显示主要主题

Answer 1

您应该使用 .label 来匹配带有 class（或 React 中的 className）标签的元素，对于元素 <label> 使用不带点的 label

如何在反应中设置标签的背景颜色？

How to set background color of label in react?

javascript

reactjs

material-design

material-ui

jss