如何在单独的 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;
}