[2020-03-15] Material-UI theme

gracekrcx commented 4 years ago

Typography

const theme = createMuiTheme({
  typography: {
    // Tell Material-UI what the font-size on the html element is.
    htmlFontSize: 16,
    fontSize: 14,
  },
});

changing font family of all material-ui(version 1) components

Palette 調色板

color intentions:

primary - 主
secondary - 次要的
error - aware of
warning - dangerous actions or important messages.
info - 中性的 and 不是很重要的訊息
success

顏色的幾種寫法

primary: purple 這裡的 purple 是 @material-ui/core/colors/purple，色階預設就是 300, 500, 700，也是 docs 裡面寫的 Using a color object

這裏修改 main: orange[300]，其他的色階都會 calculated from palette.secondary.main，也是 docs 裡面寫的 Providing the colors directly If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main", according to the "tonalOffset" value.
```
palette: {
secondary: {
  main: orange[300],
},
},
```

每個都自己來


palette: {
primary: {
  light: '#757ce8',
  main: '#3f50b5',
  dark: '#002884',
  contrastText: '#fff',
},
}

4. 顏色不夠嗎？可以新增 variables 在 theme（不是在 Palette）
[link](https://material-ui.com/customization/theming/#custom-variables)

const theme = createMuiTheme({ status: { danger: orange[500], }, });


## Themes let you apply a consistent tone to your app

### ThemeProvider
1. It should preferably be used at the **root of component tree**.
2. ThemeProvider relies on the **context** feature of React to pass the theme down to the components
[link](https://material-ui.com/styles/api/#themeprovider)

### Theme configuration variables
改變 theme configuration variables 是使 Material-UI 符合你的需求最有效的方法

 ### default theme section 
[link](https://material-ui.com/customization/default-theme/)

###  add additional variables to the theme 
增加 additional variables to the theme 讓 app 的其他檔案也可以用
```js
const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

useTheme

得到 theme 的方法之一

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

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

gracekrcx commented 4 years ago

第一次改 MuiSelect 改到快瘋可以再試試

gracekrcx commented 4 years ago

Theming

Add a ThemeProvider to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions.

build your custom Material-UI theme.

use the createMuiTheme()

補充： This example creates a theme object for custom-built components. 底下的 example 是創造一個 theme object 給你自己客製的 compoent If you intend to use some of the Material-UI's components 如果你打算使用 Material-UI's components you need to provide a richer theme structure using the createMuiTheme() method. 你需要使用一個更豐富的 theme structure，使用 createMuiTheme() 這個方法 Head to the the theming section to learn how to build your custom Material-UI theme.

const useStyles = makeStyles((theme) => ({
  root: {
    background: theme.background, // 在這裡引用
    border: 0,
    fontSize: 16,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
}));

function DeepChild() {
  const classes = useStyles();

  return (
    <button type="button" className={classes.root}>
      Theming
    </button>
  );
}

const themeInstance = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};

export default function Theming() {
  return (
    <ThemeProvider theme={themeInstance}>
      <DeepChild />  // 非 material ui 
    </ThemeProvider>
  );
}

gracekrcx / weekly-notes