Languages
[Edit]
PL

React - stylowanie elementów

0 points
Created by:
Ela-Davey
243

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:

Przykład stylu CSS w React
Przykład stylu CSS w Reakcie

ReactJS (PL)

React - stylowanie elementów
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join