Dynamic inline-styles for buttons(tiles)

[BrianWahinya]

Before you start - checklist

• I have checked if this feature request is not already reported

Description

I would like to add dynamic inline-styling to a specific tile/button without assigning a className or changing tileContent.
In React it is possible to do this:

const userColor = getUserInput()
return <>
  <button>10<button>
  <button style={{ backgroundColor: userColor}}>11<button>
  <button>12<button>
</>

Assigning a tileClassName isn't sufficient because you need to already have defined the colors in an external CSS file for that particular class. This isn't dynamic.
My goal is to let the user decide the color of a particular tile from a color-palette within the program.

Proposed solution

Similar to how we assign a className using tileClassName, there can be a method such as tileStyle to handle inline styling.

  const tileStyle= ({ date }) => {
      if(compare(date, targetDate)){
        return {
          backgroundColor: "#000",
          fontSize: "15px"
        }
      }
  }

 return <ReactCalendar tileStyle={tileStyle} />

Alternatives

No response

Additional information

No response

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[wojtekmaj]

A much more maintainable approach would be to either create a generic tileProps function, or a renderTile function that would let override the default tile rendering logic.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.