實現 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>

這將使所有段落居中對齊。 祝你好運