how to style html attibutes in react js without making additional classes-CodePudding

is Where a way to style native html video attributes in React? I was googling entire day , I found some library for that but when I tried it apparently its not working anymore. any tips?

CodePudding user response：

Is there a reason why the following pattern will not work for you (by using inline styles):

const YoutubeEmbed = ({ embedId }) => (
  <div className="video-responsive" style={{ color: 'blue', lineHeight: 10, 
    padding: 20 }}>
  </div>
);

CodePudding user response：

I've worked on the chili.tv video player, here's few notes for you:

The first thing you want to consider is that React doesn't really come with its own styling solution (like other libraries), therefore when you say "styling in React" you're basically just referring to standard HTML/CSS styling, unless you're using some third-party styling solution like SASS or Styled Components.

That said, assuming you're trying to style the <video> element controls, you can just use the video css pseudo-classes, here's a (probably not complete) list:

video::-webkit-media-controls {}

video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

But this is, in my opinion, quite tedious and as you probably noticed already doesn't always work/has compatibility issues.

My suggestion would be (and perhaps is the most used approach) to just hide the native controls and create your own custom controls using HTML, then you'll be styling those as you like and use javascript to attach actions (I suggest using refs in React to avoid unnecessary re-renders).

video::-webkit-media-controls {
  display: none;
}