9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-08-19

はじめに

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>
  )
}

最後に

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

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?