1
          <button
            type="submit"
            name="submit"
            color="primary"
            className="test-class"
            style={{
              background: "var(--back-color)",
              borderRadius: "5px",
              color: "var(--text-color)",
              cursor: "pointer",
              padding: "10px",
              border: "none",
              fontSize: "1rem",
              ":focus": {
                outline: "none",
              },
            }}
          >
            LOGIN
          </button>

and if I change ":focus" to "&:focus", it still doesn't work.

Bear Bile Farming is Torture
  • 4,317
  • 4
  • 27
  • 61
  • 1
    this question answered in this link: [CSS Pseudo-classes with inline styles](https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) –  Jan 13 '22 at 17:30

1 Answers1

1

You cannot target the pseudo-classes or pseudo-elements in inline-css.

Sangeet Agarwal
  • 1,674
  • 16
  • 25