[Core] There should be a more sophisticated styling solution.

@callemall/material-ui please leave some input here when you can 👍

We need to decide on a styling solution for 0.16.0 that will help address long standing issues. Outside of performance issues, there are hacks and props all over the place to make up for the fact that we are missing out on some of the powerful features in CSS that cannot be used with inline styles – pseudo classes, media queries (without matchmedia), etc.

From what I understand, the general consensus is that we want a JS style solution that has the capability to write styles to an actual stylesheet in the DOM.

Here are a few of the maintained solutions that do this: https://github.com/rofrischmann/react-look https://github.com/Khan/aphrodite https://github.com/jsstyles/react-jss

Here are some points we need to consider when implementing the new solution (IMO):

1. Does it align with our goals? (lightly touched on above)
2. Implementing media queries that follow the high level breakpoints detailed in the spec that can be easily used in components with a stylesheet mixin (or whatever the implementation we use calls them). If we’re overhauling the style implementation, it is the opportune moment to plant the seed for much better responsive UI support in this library. It would be even better if these tools are available in userland too 👍
3. Should we create layout helper components and/or mixins to help unify flexbox layout implementations across the lib?
4. Does theming needs to change to maximize best use of the new solution? While theming is one component of consistent styling, we should also look into creating variables for many of the common material styles such as global keylines/font sizes/spacing/margins/etc. I strongly recommend we improve our typography consistency by creating predefined type styles matching the material-ui typography guide, and try match up component elements like titles etc as best possible to these global type style variables as a default.
5. If using a library as large as react-look, try and see how we can import modules for a minimal build size. The full build size is 16kb gzipped which is fairly large. It would be great if we can minimize the impact on build size. I realized that 9kb of that is https://github.com/rofrischmann/inline-style-prefixer which we already use… 😄

[nehalbhanushali]

Is the styling solution finalized?

[nathanmarks]

@chrismcv My personal opinion is that we definitely need to leverage the solution to remove these super specific props we’re seeing proposed: [TextField] add floatingLabelFocusStyle prop #4043

Before we know it, people are going to be asking for props for subcomponent styles for every possible focus/active/hover/whatever state.

I see so many issues that are “how to style XXXX”, “can’t style XXX inside YYYY”, “add somethingInsideToTheLeftButSlightlyMiddleFocusHoverActiveStyle prop to XXX please”