PL
React - stylowanie elementów
0 points
W tym artykule chcielibyśmy pokazać, jak stylować elementy w Reakcie.
Istnieją dwa najpopularniejsze sposoby stylowania:
- używając stylowania inline z właściwością
style, - używając arkuszy stylów CSS z właściwością
className.
Uwaga:
Istnieje więcej sposobów stylizacji, np. StyledComponents , itp., Ale w tym artykule przedstawiamy tylko najprostsze podejścia.
W tym rozwiązaniu możemy tworzymy obiekt myComponentStyle i dołączamy go do właściwości style komponentu MyComponent.
xxxxxxxxxx1
// import React from 'react'2
// import ReactDOM from 'react'3
4
const myComponentStyle = {5
height: '200px',6
width: '200px',7
background: 'goldenrod',8
textAlign: 'center'9
10
}11
12
const MyComponent = () => {13
return (14
<div style={myComponentStyle}>15
mój komponent16
</div>17
)18
}19
20
const root = document.querySelector('#root');21
ReactDOM.render(<MyComponent/>, root );Uwaga:
w stylach wbudowanych używamy innej składni niż w arkuszach stylów CSS (camelCase).
W tym rozwiązaniu musimy dołączyć plik ./MyComponent.css, który będzie przekazywany do właściwości className komponentu MyComponent.
Plik MyComponent.jsx:
xxxxxxxxxx1
import React from 'react'2
import './MyComponent.css'3
4
const MyComponent = () => {5
return (6
<div className="my-component-style">7
Mój komponent8
</div>9
)10
}Plik MyComponent.css:
xxxxxxxxxx1
.my-component-style {2
width: 200px;3
height: 200px;4
background: goldenrod;5
text-align: center;6
}Dane wyjściowe przeglądarki:
