Question

我创建了 ProgressBar.js 组件，其 ProgressBar.css 我将此组件导入另一个 Targets.js 组件，我想至少使用 Targets.css 中定义的网格定位进度条，但我在 Targets.js 中为 ProgressBar 组件创建的每个类都没有应用任何样式。我只附上我的代码的必要部分。

我的progressbar.js 组件：

const ProgressBar = (props)=>{
    return(
        <div className={classes.Container}>
            <div className={classes.ProgressBarGradient}>
                <div className={classes.GradientHider}/>
            </div>
        </div>
    )
}


const ProgressBarComponentFunc = (props) => {
    return(
        <ProgressBar></ProgressBar>
    )
}

我的targets.js 文件：

const ProgressBar1Column1 = (props)=>{
    return (
        <div className={classes.Container}>
            <ProgressBar className={classes.ProgressBarColumn}></ProgressBar>
        </div>
    );
}

我的Targets.css代码：

.Container{
    display:grid;
    grid-template-columns: 20px 240px 302px 302px 302px 19px;
    grid-template-rows: 50px 42px 42px 42px 42px 42px;
}

.ProgressBarColumn{
    grid-column: 3/4;
    grid-row: 2/3;
}

我认为也许答案来自于我想将一个类添加到一个函数而不是一个元素的事实，但如果这是我的问题的关键，我不知道如何解决它......

非常感谢

如何在反应中将 CSS 应用于导入的组件？

0 个答案: