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

Question

我的任务是删除项目中的所有内联 CSS。这是一个带有 sass 的 React 项目。我能够删除所有内联 css 并放入一个单独的“样式”目录，除了这个。我告诉我的老板我们可以保留它，因为它很小并且使代码更具可读性，但他坚持要删除它并在样式目录中放置一个单独的文件。
怎么做呢？任何和所有的帮助表示赞赏。

****这是代码****（这是来自组件文件的片段）

               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;
}