React - stylowanie elementów

W tym artykule chcielibyśmy pokazać, jak stylować elementy w Reakcie.

Istnieją dwa najpopularniejsze sposoby stylowania:

1. używając stylowania inline z właściwością style,
2. 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.

1. Stylowanie inline

W tym rozwiązaniu możemy tworzymy obiekt myComponentStyle i dołączamy go do właściwości style komponentu MyComponent. 

// ONLINE-RUNNER:browser;

// import React from 'react'
// import ReactDOM from 'react'

const myComponentStyle = {
    height: '200px',
    width: '200px',
    background: 'goldenrod',
    textAlign: 'center'

}

const MyComponent = () => {
    return (
        <div style={myComponentStyle}>
            mój komponent
        </div>
    )
}

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent/>, root );

Uwaga: 

w stylach wbudowanych używamy innej składni niż w arkuszach stylów CSS (camelCase).

2. Korzystanie z arkuszy stylów CSS

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:

import React from 'react'
import './MyComponent.css'

const MyComponent = () => {
    return (
        <div className="my-component-style">
            Mój komponent
        </div>
    )
}

Plik MyComponent.css:

.my-component-style {
    width: 200px;
    height: 200px;
    background: goldenrod;
    text-align: center;
}

Dane wyjściowe przeglądarki: