@material-ui/styles

[oliviertassinari]

This is a proof of concept. I have taken many shortcuts to make everything works together. This pull request is introducing:

• An isolated @material-ui/styles package. I think that we can start with a v3.0.0-alpha.0 release.
• Official support for the hook API.
• a CSS = f(props) feature like all the major CSS-in-JS solutions have.
• Use the new context API.
• Upgrade to React v16.7.0-alpha.0.
• Official support for the styled-components API
• Official support for the render prop API

Closes #7633
Help with #13465

Merging this pull request will take some time. @mui-org/core-contributors early feedback is welcomed :)

[oliviertassinari]

@ConneXNL It's not about using styled-components under the hood (we will see later for that), it's about publishing this documented API in a module: https://material-ui.com/customization/css-in-js/#styled-components-api---15-lines-

[jrmyio]

Official support for the styled-components API.

Would love to see an example of this!

[eps1lon]

I'm always in favor of leveraging the monorepo pattern more. I'm not familiar with the styling implementation so I'm not able to spot fundamental changes. Overall this looks fantastic apart from some minor nitpicks.

One thing I already started locally was creating a scripts package for stuff like test runners and build tasks which are currently duplicated throughout the repo. This will only get worse with every package we add.

[eps1lon]

That should point to build/index.js.

[sakulstra]

Sorry for this ot question:

It's not about using styled-components under the hood (we will see later for that)

@oliviertassinari Is this an ongoing discussion somewhere? I'd love to read the arguments for both sides

[oliviertassinari]

Is this an ongoing discussion somewhere? I'd love to read the arguments for both sides

@sakulstra The styled components API implementation is less than 20 lines of codes with the withStyles higher-order components. It's the simplest solution.

[nicholas-l]

Isn't have the ternary conditional (const theme = listenToTheme ? React.useContext(ThemeContext) : noopTheme;) in makeStyles bad? I thought you couldn't have hooks in conditionals?
Would this be better:

const themeContext = React.useContext(ThemeContext);
const theme = listenToTheme ? themeContext : noopTheme;

Or is it OK because listenToTheme a constant for the life of the function?

[oliviertassinari]

@nicholas-l Yes, it's fine. It will never change between two renders. Thank you for checking the implementation out.

[franklixuefei]

What about type definition updates? :-D

[eps1lon]

@franklixuefei Need to finish up the context API rewrite for FormControl today and then I'll take a look.

[jrestall]

// index.tsx

import { install } from '@material-ui/styles';

install();

// Ensures install is called before anything else.
// We can remove this once Material-UI v4 is released
require('./init.tsx') // Standard Index.tsx code

I'm doing this to ensure install is called first and to therefore avoid conflicting jss class names when building for production. Is there a recommended cleaner approach for now?

[XHMM]

got An unexpected error has occurred. when visiting https://material-ui.com/css-in-js/basics/
and the console error is:

[oliviertassinari]

@XHMM It hasn't been translated yet. You can change the language:

[yhaiovyi]

It doesn't really solve the problem doesn't it? What if I need to change not root styles?

[oliviertassinari]

@yhaiovyi What do you mean?

[yhaiovyi]

Every example operates with { root: ... } styles only, and you inject it in element through className, which is confusing the least to say.

[yhaiovyi]

Btw, thanks that quick response.

But speaking of the real world example. I need to be able to set offsets for Tooltip based on component's props. If I wanted them static, I'd do something like

withStyles({ tooltip: { margin: '10px' }})(Tooltip)

but what should I do, if I need to set that margin with property?

And the last question is that possible to have that feature with mui stable, or alpha is the only option?

[oliviertassinari]

@yhaiovyi You can use the prop in the style: https://next.material-ui.com/css-in-js/basics/#adapting-based-on-props.

[yhaiovyi]

Doesn't explain styling of nested elements, none of examples covers that topic.

[oliviertassinari]

@yhaiovyi Something like this?

withStyles({
  tooltip: {
    margin: props => props.size === 'large' ? 20 : 10,
  },
})(({ size, ...props }) => <Tooltip {...props} />);

[yhaiovyi]

Damn, I may be doing something wrong, I was sure I've tried that way. But hold on, so should it work with 3.9.2 ?

[oliviertassinari]

@yhaiovyi No, v4.

[yhaiovyi]

And can you think about any ETA for at least beta? Thanks.

[oliviertassinari]

@yhaiovyi We will have beta once #13663 is closed.