Material-ui: styled("div")(t=> ({})) @4.0.0-alpha.4

[oyb81076]

import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, Theme } from "@material-ui/core/styles";
import { styled, ThemeProvider } from "@material-ui/styles";
import * as React from "react";
const theme = createMuiTheme({});
const Box = styled("div")((t: Theme) => ({
    backgroundColor: t.palette.primary.main,
    height: 100,
    width: 100,
}));
export default function Bootstrap() {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Box />
        </ThemeProvider>
    );
}

[brunoguerra]

https://github.com/mui-org/material-ui/blob/997324d52467e3a7b7a8058c0ba8309d04d4ddf6/packages/material-ui-styles/src/styled/styled.js#L106

Following this line, you need use destructuring declaration of variable form, or get property of t.theme,

so, your code may be this:

import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, Theme } from "@material-ui/core/styles";
import { styled, ThemeProvider } from "@material-ui/styles";
import * as React from "react";
const theme = createMuiTheme({});
const Box = styled("div")(({ theme }) => ({
    backgroundColor: theme.palette.primary.main,
    height: 100,
    width: 100,
}));
export default function Bootstrap() {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Box />
        </ThemeProvider>
    );
}

Please, let me know if it works

[oliviertassinari]

Correct, we should document it.

[sveyret]

Typings is also wrong. I will make a PR for it.