Published 2021-04-14
React Elements Styles
React
中应用元素样式有以下几种方式:
引入全局样式
行内样式
function App() {
return (
<header className="App-header">
<p style={{margin: '1px', padding: '5px'}}>
<code>src/App.js</code>
</p>
<a
style={{color: 'red', backgroundColor: 'green'}}
className="App-link"
href="https://reactjs.org"
target="_blank"
>
Learn React
</a>
</header>
)
}
为各个组件创建单独的样式,并且在组件中使用
import React from 'react'
import './App.css'
function App() {
return (
<header className="App-header">
<p style={{margin: '1px', padding: '5px'}}>
<code>src/App.js</code>
</p>
<a
style={{color: 'red', backgroundColor: 'green'}}
className="App-link"
href="https://reactjs.org"
target="_blank"
>
Learn React
</a>
</header>
)
}
export default App
将 style
属性附加到 JavaScript
样式对象
import React from 'react'
var stylingObject = {
div: {
color: 'red',
border: '1px solid red'
},
input: {
margin: '2px',
padding: '5px'
}
}
function App() {
return (
<div style={stylingObject.div}>
<input style={stylingObject.input} type="text" />
</div>
)
}
export default App
Comments
No Comments!