Styling with CSS

[raunofreiberg]

Hey, thanks for the great library!

I have a question about how should one go about styling certain components? A lot of the components in ui don't have a className to them (e.g. https://github.com/uber/react-view/blob/master/src/ui/editor.tsx#L75)

[tajo]

You need to implement your own components. We do it at baseweb.design.

However, I am open to make the basic ui components more customizable so you if you need small tweaks, you don't have to copy&paste everything over.

[raunofreiberg]

Thanks for the response. For now, I went with implementing my own components (knobs, specifically), which works well.

Although, there are some components that I wouldn't want to implement on my own. For example, I'd like to change the flex positioning of Compiler, or change the focus border color of Editor.

Compiler and Editor don't seem like the kind of components that anyone would implement any different from the library's either, so right now it's just causing duplication for projects that wish to make minor adjustments 🙂

---

I think adding a few global class names for tweaking would suffice. Happy to help out with this, if necessary!

[tajo]

I think adding a few global class names for tweaking would suffice.

I would rather see an ability to pass down classNames which would get applied to those divs instead of inline styles (inline styles would be still used as a default option).

So for example, Compiler could be styled as:

<Compiler cx={{ root: "className-a", inner: "className-b" }} />

(compiler has two nested divs)

this way, you could also use CSS in JS libs to generate these classNames and avoid globals.

[raunofreiberg]

Sounds good. Would you like me to kick this off with a PR?

[tajo]

That would be great. Thanks!