styled-component 使用三 Style Objects，Theme, GlobalStyle

GlobalStyle
 useimport { GlobalStyle } from "./components/BUI";

ReactDOM.render(
 <React.StrictMode>
   <GlobalStyle />
    <App />
 </React.StrictMode>,
 document.getElementById("root")
);
define
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
 html,body {
   height: 100%;
 }
`;
export default GlobalStyle;

不使用``配合props使用
​​​Style Objects​​

import { TextField as MaterialTextField } from "@material-ui/core";
import styled from "styled-components";

interface TextFieldProps {
  width?: string;
  flex?: number;
  height?: string;
}

export const TextField = styled(MaterialTextField).attrs({ variant: "filled" })(
  (props: TextFieldProps) => ({
    width: props.width,
    height: props.height,
    flex: props.flex,
  })
);

​​主题​​​
和material-ui一起使用共享一套主题

import { createMuiTheme } from "@material-ui/core";
import { Mode } from "../redux/types";

export const darkTheme = createMuiTheme({
  palette: {
    type: Mode.DARK,
  },
});

export const lightTheme = createMuiTheme({
  palette: {
    type: Mode.LIGHT,
  },
});

import {
  ThemeProvider as StyledThemeProvider,
  createGlobalStyle,
} from "styled-components";
import { useSelector } from "react-redux";
import { ThemeProvider as MaterThemeProvider } from "@material-ui/core";
// redux toggle theme
const { theme } = useSelector((state: any) => state.theme);
//tsx
<StyledThemeProvider theme={theme}>
 <MaterThemeProvider theme={theme}>
   <GlobalStyle />
   <Router>
     <Switch>
       {routes.map(renderRoute)}
       <Redirect to="notfound" />
     </Switch>
   </Router>
 </MaterThemeProvider>
</StyledThemeProvider>

跟随主题变化的组件

export const Div = styled.div`
  background-color: ${(props) => props.theme.palette.background.default};
  color: ${(props) => props.theme.palette.text.primary};
`;