在反应 mui 组件上使用 css codepen

Question

我正在尝试使用 react 和 makeStyles 使这种影响在我的材质 ui 卡组件上工作，我真的不知道如何将这种影响转换为卡，有人可以帮我将其翻译成简单的 css 代码，所以我可以在 MakeStyles 中使用它吗？我认为我的问题是我不理解 codepen 上的代码，如果你们中的一些人有类似的 codepen 并且可以分享它，我将不胜感激，谢谢。

https://codepen.io/chrisdothtml/pen/OVmgwK

/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// variables
$anim-speed: 0.3s;

// main styles
.tiles {
    width: 1040px;
    font-size: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    .tile {
        display: inline-block;
        margin: 10px;
        text-align: left;
        opacity: .99;
        overflow: hidden;
        position: relative;
        border-radius: 3px;
        box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
        
        &:before {
            content: '';
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.7) 100%
            );
            width: 100%;
            height: 50%;
            opacity: 0;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 2;
            transition-property: top, opacity;
            transition-duration: $anim-speed;
        }
        
        img {
            display: block;
            max-width: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        .details {
            font-size: 16px;
            padding: 20px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            
            span {
                display: block;
                opacity: 0;
                position: relative;
                top: 100px;
                transition-property: top, opacity;
                transition-duration: $anim-speed;
                transition-delay: 0s;
            }
            
            .title {
                line-height: 1;
                font-weight: 600;
                font-size: 18px;
            }
            
            .info {
                line-height: 1.2;
                margin-top: 5px;
                font-size: 12px;
            }
        }
        
        &:focus,
        &:hover {
            
            &:before,
            span {
                opacity: 1;
            }
            
            &:before {
                top: 50%;
            }
            
            span {
                top: 0;
            }
            
            .title {
                transition-delay: 0.15s;
            }
            
            .info {
                transition-delay: 0.25s;
            }
        }
    }
}

Answer 1

您在 CodePen 上看到的 CSS 代码使用 SCSS。单击 CSS 编辑器下拉图标 -> 查看已编译的 CSS。

显然，顾名思义，这将向您显示编译后的 CSS。 :)