Help us understand the problem. What is going on with this article?

Material UI の Shadow を完全にオフる方法(React)

More than 1 year has passed since last update.

はじめに

Button をオーバーライドして

shadow = 'none'

にしておけば、オフにできるかなと思ったけど
押下した時に現れる影は消せていないことが判明したので、ちょこっと付け加えることにした

押下前

image.png

押下時

image.png

解決

これだけ
none の付け方に注目

import {createMuiTheme, makeStyles} from '@material-ui/core/styles';
import {MuiThemeProvider} from "@material-ui/core";

const theme = createMuiTheme({
  shadows: ["none"]
});

const Index = () => {
  return(
    <MuiThemeProvider theme={theme}>
      <Button variant={valiant} className={classes.button}>
        ボタンだよん    
      </Button>
    </MuiThemeProvider>
  )
}

最後に

「この画面では、俺はリプルエフェクトだけが欲しいんだ!!!影はいらん!!」
という方は試してみてくださいな

from_host
プライベートは常に何か作ってる 担当領域はフロント/バックエンド/インフラ 一番得意なのはDjango
mlabs
自社サービス: AI広報支援 HARVEST (https://harvest.site) エンジニア専門クラウドソーシング Task(https://www.task.site/)
https://m-lab.inc
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away