Question

我的任务是删除项目中的所有内联CSS。这是一个带有sass的React项目。我能够删除所有内联css并将其放置在除此之外的单独的“样式”目录中。我告诉老板，我们可以将其保留为最小限度，以使代码更具可读性，但他坚持将其删除，并在styles目录中放置一个单独的文件。
人们将如何去做呢？任何和所有帮助表示赞赏。

****这是代码****（这是来自组件文件的摘录）

               isLoggedIn ? (
                    <span
                        className='share-icon cursor'
                        style={
                            {
                                height: '20px',
                                width: '100px'
                            }
                        }
                    >
                        <img src={shareImage}/>
                    </span>
                ) : (
                    <span
                        className='people-icon cursor'
                        style={
                            {
                                height: '20px',
                                width: '100px'
                            }
                        }
                    >
                        <img src={groupImage}/>
                    </span>

Answer 1

只需使用这些高度和宽度值创建一个类，然后在两种情况下都使用它：

 isLoggedIn ? (
                <span
                    className='share-icon cursor whatever-classname-makes-sense'>
                    <img src={shareImage}/>
                </span>
            ) : (
                <span
                    className='people-icon cursor whatever-classname-makes-sense'>
                    <img src={groupImage}/>
                </span>

CSS：

.whatever-classname-makes-sense {
    width: 100px;
    height: 20px;
}

如何在单独的CSS文件中设置条件渲染的三元运算符的样式？

1 个答案: