react 函数组件写样式.docxVIP

react函数组件写样式

在React函数组件中，你可以使用内联样式或外部样式表来编写样式。

内联样式

在函数组件中，你可以使用?style?属性来应用内联样式。style?属性是一个JavaScript对象，其中每个属性对应一个CSS样式属性。例如，以下代码将一个按钮的背景颜色设置为红色：

jsx复制代码

importReactfromreact;

functionMyButton(){

return(

buttonstyle={{backgroundColor:red}}

Clickme

/button

);

}

exportdefaultMyButton;

外部样式表

在函数组件中，你也可以使用外部样式表来编写样式。首先，你需要在CSS文件中编写样式，然后使用?import?语句将其导入到你的函数组件中。例如，以下代码将一个按钮的背景颜色设置为红色，使用了外部样式表：

css复制代码

/*Button.css*/

.my-button{

background-color:red;

}

jsx复制代码

importReactfromreact;

import./Button.css;//导入外部样式表

functionMyButton(){

return(

buttonclassName=my-button

Clickme

/button

);

}

exportdefaultMyButton;

在上面的代码中，我们使用?import?语句将?Button.css?文件导入到?MyButton?组件中。然后，我们使用?className?属性将按钮的类名设置为?my-button，以便在CSS文件中应用样式。

无论你选择使用内联样式还是外部样式表，都可以在React函数组件中轻松地编写样式。