Styled Components - Discussion

[JarrodMFlesch]

This is a really nice lib, makes interacting with slate a breeze with all of the helper functions. It has helped me tremendously, just reading the code here helps me connect the missing pieces from the slate documentation.

Is there a reason that Styled components are a peer dep? It just feels kind of strange that I am forced to add them as a dependency. I understand why it is there, to lower the barrier of entry/use, but I would argue that unstyled/inline-styled buttons would serve the same purpose and remove the dependency.

Love to hear thoughts on this!

[zbeyens]

Hi, thanks for the feedback!

Using styled components was just a quick way to style the components. We're slowly moving to Fluent UI way of styling (e.g. Toolbar components). Thus we plan to have a styles props to all the components so the user will be able to reuse these provided components or just use the component option of the plugins to replace the default component. Once done everywhere, styled components will be entirely removed.

[JarrodMFlesch]

Nice! I appreciate the quick feedback - sounds like a solid plan.

[zbeyens]

Finally done in v22 #2472, we no longer use styled-components.

[denyeo]

Interesting, I just tried Plate today and couldn't quite grasp from docs: Getting Started how to get import the styled (Playground) toolbar buttons immediately, since they don't show up in the examples. Do they have to be installed via Plate UI? Was a bit confused.

edit: Seems like Plate UI needs to be installed. I'm not sure if that can be done in an existing app, because it might interfere with my existing CSS and Tailwind config? Is Plate UI meant to be installed as a standalone new project?

[zbeyens]

Thanks for sharing.

The docs is composed of 2 parts: headless and components (unstyled vs styled). If clicking on "Components", you'll see the toolbar components in the sidebar. Plate UI is also mentioned 2 times in https://platejs.org/docs. You can also search these in cmdk.

[zbeyens]

Plate UI can be installed manually, see https://platejs.org/docs/components/installation/manual.