why inline styling &:hover will not have any effect in react js-CodePudding

I'm trying to add hover effect to a span element as shown below.

Hover effect doesn't work when added inside style prop.
But, If it is written in separate css file it will work

I just want to know, Why it is So?

https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <span
        style={{
          fontSize: "4em",
          color: "blue",
          "&:hover": {
            color: "green"
          }
        }}
      >
        Element
      </span>
      <div></div>
      <span className="ele">Element 2</span>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.ele {
  font-size: 4em;
  color: blue;
}

.ele:hover {
  font-size: 6em;
  color: green;
}

CodePudding user response：

You need to use JSS Plugin which supports the psudo-selectors inline style, or you should use Material UI, which also support this plugin.

CodePudding user response：

That because we can't specify the inline styles for pseudo elements and pseudo classes. You can use it with the,

Internal - by using a <style> element in the section.

An internal CSS is defined in the section of an HTML page, within a element.example

External - by using a element to link to an external CSS file To use an external style sheet, add a link to it in the section of each HTML page.example