Reactjs 如何在单独的css文件中设置条件呈现的三元运算符的样式？

我的任务是删除项目中的所有内联css。这是一个带有sass的React项目。我能够删除所有内联css，并将其放在一个单独的“样式”目录中，除了这个目录。我告诉我的老板，我们可以保留它，因为它是最小的，使代码更具可读性，但他坚持删除它，并将其放在styles目录中的单独文件中。
一个人怎么做呢？非常感谢您的帮助

****这是代码****（这是一个组件文件的snipet）

isLoggedIn？(
) : (

只需创建一个具有这些高度和宽度值的类，并在两种情况下使用它：

 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>

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