Document how to override classes and styles

deluan commented 4 years ago

Description

Is it possible to create an example on how to override classes and styles in the player? Ex: how to change color of buttons?

Thanks!

lijinke666 commented 4 years ago

import ReactJkMusicPlayer from "react-jinke-music-player";
import "react-jinke-music-player/assets/index.css";
import "your/path/override.css"

you can find target class name to override

// override.css

.react-jinke-music-player-main {
    .some-class-name {/* */}
}

deluan commented 4 years ago

Thanks for the quick reply.

Sorry, I didn't make myself totally clear: My situation is that I want to dynamically change colors as part of a theme in my application. I'd need to change this at runtime, with JS code, and not a static CSS file.

You can see what I mean from this screen capture: Kapture 2020-04-08 at 9 35 35 This is achieved by changing the player's theme option, but I'd like to be able to also change the color scheme.

The idea is that new themes can be added dynamically, and themes are just a JSON file, even created by the user. If I use a CSS file, I'd need to rebuild the app to use it...

Example of theme:

{
  "themeName":"Light",
  "palette":{
    "secondary":{"light":"#5f5fc4","dark":"#001064","main":"#283593","contrastText":"#fff"}
  },
  "overrides":{
    "MuiFilledInput":{
      "root":{
        "backgroundColor":"rgba(0, 0, 0, 0.04)",
        "&$disabled":{"backgroundColor":"rgba(0, 0, 0, 0.04)"}
      }
    }
  },
  "player":{
       "theme":"light",
       // add here extra attributes to override colors <---------
   }
}

I was thinking about reading these colors/styles from this JSON and use the player's className option, but I think it does not allow to change styles in the children components, right?

Ideally we could have a classes attribute or similar, which would be an object with classNames with overrides for each one of the player's children. Then we could generate this classes object using StyledComponents or something similar, using JS code.

Maybe there's a simpler solution. Thoughts?

lijinke666 commented 4 years ago

Sorry. not support the feature. It's beyond the scope of the player. but, I think you can provide some fields for your JSON schema, eg.

  "player":{
       "theme":"light",
       // add here extra attributes to override colors <---------
       "backgroundColor": 'red',
       "buttonColor": '#555'
   }

then dynamic create a style tag append to <head> tag, like this

const backgroundColor =  'red'  // from parse result
const buttonColor = '#555'
const style = document.createElement('style')

// override some class name
style.innerHTML = `
    .player-target-class-name {
        background-color: ${backgroundColor}
   }
   .player-button-class-name {
       color: ${buttonColor}
   }
`

document.head.appendChild(style)

What do you think?

(Just found out that you and I are the same company :) )

deluan commented 4 years ago

Thanks for the suggestion, I will try this.

(Just found out that you and I are the same company :) )

What a coincidence! :D

lijinke666 / react-music-player

Document how to override classes and styles #94

Description