mui appbar no shadow (1)

📌 相关文章

📜 mui appbar no shadow (1)

📅 最后修改于: 2023-12-03 15:17:44.866000 🧑 作者: Mango

MUI AppBar - How to Remove Shadow

When creating a mobile app with MUI, it is important to customize the app bar to fit your design specifications. One frequently requested design feature is the ability to remove the drop shadow from the app bar. This can be achieved using a simple CSS override.

Code

.mui-appbar {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Explanation

The mui-appbar class is the CSS class that is applied to the MUI app bar component. To remove the drop shadow from the app bar, we can simply use the box-shadow property with the none value.

On some older versions of iOS, the -webkit-box-shadow property must also be set to none to properly remove the drop shadow.

Implementation

To implement this in your MUI app, simply add the above CSS code to your project's CSS file or style block. Make sure to include the CSS after the MUI CSS file to ensure that it takes precedence over the default MUI app bar styles.

<!DOCTYPE html>
<html>
<head>
    <title>MUI AppBar - No Shadow</title>
    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .mui-appbar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <header class="mui-appbar">
        <div class="mui-container">
            <a class="mui--text-title" href="#">My App</a>
        </div>
    </header>
    <script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</body>
</html>

Conclusion

Removing the drop shadow from the MUI app bar is a simple and effective way to customize the look and feel of your mobile app. By adding a few lines of CSS, you can create a clean and modern app bar that fits your design requirements.