Material-Ui将伪类':: before'与组件类props一起应用

时间:2019-05-22 15:41:51

标签: css reactjs material-ui

我尝试对mui-app-bar使用伪类。香港专业教育学院阅读有关此问题。但这并没有带给我更多。我的组件看起来像这样:

const styles = (theme: Theme) => createStyles({
    appBar: {
        backgroundColor: theme.palette.background.default,
        height: '48px',
        '&::before': {
            content: "",
            position: 'absolute',
            left: '2.5%',
            bottom: 0,
            right: '2.5%',
            width: '95%',
            borderBottom: '1px solid magenta',
        }
    }
});

class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
        const { classes } = this.props;
        ...

        return (
                <AppBar className={classes.appBar} position="relative">
                  ...
                </AppBar>

        );
    }
}

export default withStyles(styles)(withTranslation()(TabBar));

编辑

对一个冒号应用伪类对我也不起作用。

4 个答案:

答案 0 :(得分:0)

仅使用一个冒号[Error - 18:38:16] ESLint stack trace: [Error - 18:38:16] TypeError: Cannot read property 'meta' of undefined at c.isFunction.H.handled.has.p.getRules.forEach (/home/bob/.vscode/extensions/dbaeumer.vscode-eslint-1.9.0/server/out/eslintServer.js:1:55431) at Map.forEach (<anonymous>) at /home/bob/.vscode/extensions/dbaeumer.vscode-eslint-1.9.0/server/out/eslintServer.js:1:55413 at W.E.get.N.then.n (/home/bob/.vscode/extensions/dbaeumer.vscode-eslint-1.9.0/server/out/eslintServer.js:1:55555)

:

答案 1 :(得分:0)

我发现向html5标头元素添加伪类是行不通的。

答案 2 :(得分:0)

这是因为内容值实际上为空。 您需要使用类似以下内容:

function my-zip
{
    param(
        [string]$archive,
        [string]$myBase
    )
    $zipExe = Join-Path $env:ProgramFiles '7-zip\7z.exe'
    if(-not(Test-Path $zipExe))
    {
        $zipExe = Join-Path ${env:ProgramFiles(x86)} '7-zip\7z.exe'
        if(-not(Test-Path $zipExe))
        {
            Write-Host "7-Zip.exe not found" -ForegroundColor Red
            throw "7-Zip.exe not found"
            return 1
        }
    }

    $zipOutput = &$zipExe a -tzip $archive $myBase\* -r '-xr!*.prod' '-xr!*.test' '-xr!*.exe'
    # &$zipExe a -tzip $archive $myBase\* -r '-xr!*.prod' '-xr!*.test' '-xr!*.exe'
    if ($zipOutput -contains 'Everything is OK')
    {
        Write-Host "Files in directory $myBase added" -ForegroundColor Green
    }
    else
    {
        Write-Host "Problem during archiving files in $myBase" -ForegroundColor Red
    }
}

my-zip -archive c:\temp\test\test2019-1.zip -myBase C:\temp\test

答案 3 :(得分:0)

看到默认是:

'&::before': { 
   content: '""',
}

相反,我使用:

'&::before': { 
    content: 'none',
}