Hi, I am trying to wrap the <Rating component of M...

# react

[cfnz]

Hi, I am trying to wrap the Rating component of Material UI in my Kotlin Material UI Wrapper project (Muirwik).
Have got the basics working, but I am trying to handle the example with custom icons and colors. Custom icons sorted, but how do I handled the custom styles? JS:

const StyledRating = withStyles({
  iconFilled: {
    color: '#ff6d75',
  },
  iconHover: {
    color: '#ff3d47',
  },
})(Rating);

export default function CustomizedRatings() {
  return (
    <div>
    ...
         <StyledRating
          name="customized-color"
          defaultValue={2}
          getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
          precision={0.5}
          icon={<FavoriteIcon fontSize="inherit" />}
        />
   ...

How would I use/pass these StyledRatings styles to my component?
Kotlin - how do I add the iconFilled prop or style?:

...
    mRating("customized-empty", value, precision = 0.5, onChange = { _, newValue -> valueCustom = newValue },
        icon = mIcon("favorite", fontSize = MIconFontSize.inherit, addAsChild = false, color = MIconColor.inherit) {
            css {
                ???
            }
        }
    )

[cfnz]

Sorted by...

[cfnz]

mRating("customized-empty", value, precision = 0.5, onChange = { _, newValue -> value = newValue },
    icon = mIcon("favorite", fontSize = MIconFontSize.inherit, addAsChild = false)) {
    css {
        ".MuiRating-iconFilled" {
            color = Color("#ff6d75")
        }
        ".MuiRating-iconHover" {
            color = Color("#ff3d47")
        }
    }

[Big Chungus]

Gave your lib a quick try yesterday and I gotra say it got me quite riled up to see components atarting with lowercase 😀 might be good to have everything in uppercase to match react standards (MCard)

[cfnz]

🙂... conventions... yes, I did look at using uppercase in the beginning, but followed the Kolin conventions...

You could say a leading capital letter is a JSX convention rather than a React one, but not a Kotlin one anyway.

Also, React docs say a component function (which by convention uses a leading capital letter) is for a function which must accept only a single "props" argument and return a return a React element. So strictly speaking mCard is not a react component anyway by this definition anyway... but it is a Kotlin RBuilder component.

So since we are writing Kotlin code, when do you throw out the Kotlin convention and use something else?

Also, all the examples I have seen, including the Kotlin React wrapper examples, use lower case in their RBuilder functions, so I followed this convention.

Have you seen other libraries that use a capital letter for their RBuilder functions?

Hopefully this gives another point of view 🙂... I am thinking of dropping the "m"... but then it would become card rather than Card... again following the Kotlin RBuilder convention.

[Big Chungus]

I was mainly thinking about jetpack compose. Also i like to distinguish my builder functions with uppercase to basically match the "constructor" invocation

[Big Chungus]

As for other kotlin react component libraries, there aren't any 😄 So not much to compare to.

[Big Chungus]

But materialUI itself uses uppercased functional components

[cfnz]

I haven't really used JetPack Compose, but yes, looks like their convention is capital letter function names.
But the convention for all the Kotlin React Wrapper stuff I have come across has lowercase function names... so different conventions for pretty much the same thing... sigh...

[Big Chungus]

It's a matter of preference in the end. But having uppercase names gives better ide autocompletion by allowing it to distinguish between components and functions