javascript - How to set background color of label in react?

Question

Could you please tell me how to set the background color of the label in react? I am using react. + material ui from here.

Here is there is the concept of writing CSS in js when you scroll pages there are few plugins available examples jss-nested is using that I try to make label color to red or background color to red but I am not able to do that.

Here is my code.

I do the following steps:

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

on test.js to make the background red I used this code

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

but this code is not working. Check my screen shot I want to make that label background to red

don't want to show primary theme to input field

Answer 1

You should use .label to match element with class (or className in React) label and for elements <label> use label without dot