实现 css 的最佳方法

Question

在我的代码的某些部分中，我需要对某些元素使用相同的 css，但它是重复的，并且多次使用相同的代码，并且在 html 中看起来像这样。

<p style="color: red; height: 50%;">orange</p>

<p style="color: red; height: 50%;">apple</p>

相同的代码重复了几次，所以我想知道实现一个 css 的最佳方法，它更容易理解。

const ItemPage = () => {
    const item = ({name}) => <p style={{
        color: 'red',
        height: '50%'
    }}>{name}</p>;

    return(
        <div>
            <item name='orange'/>
            <item name='apple'/>
        </div>
    )
}

Answer 1

我认为更有效地使用 css 的最佳方法是创建一个单独的文件，然后在任何你想使用它的地方使用它，而不是一遍又一遍地重复代码

Answer 2

我建议你创建一个新的CSS文件

如果要设置所有<p>标记的style ，请将其写入CSS文件中。

例子：

p {
color: red; 
height: 50%;
}

如果您只想设置这两个<p>标记的style ，请实现class并将其命名为您想要的任何名称并将其添加到您的<p>标记中。

例子：

.style-p {
color: red; 
height: 50%;
}

<p className="style-p">apple</p>

然后您只需将文件导入当前的.js文件

Answer 3

我建议与上一个答案相同，但如果您正在寻找使所有段落居中对齐的示例，请将此代码添加到您的HTML文件中：

<style>
    p {
    text-align: center;
    }
</style>

这将使所有段落居中对齐。 祝你好运