Oppiskele Inline-Tyylien Käyttö Reactissa | Tyylittelytekniikat React-sovelluksissa

Yksi suoraviivainen mutta hieman rajoittunut tapa lisätä tyylejä on käyttää inline-tyylejä, kuten HTML-elementeille annettavassa style-attribuutissa. Reactissa ainoa ero on, että tämän attribuutin arvo on olio, ei merkkijono. Tarkastellaan yksityiskohtia.

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

Yllä olevan esimerkin App-komponentissa on h1-elementti, jonka tyylit määritellään inline-tyyleinä style-attribuutin avulla. Tärkeimmät huomioitavat seikat inline-tyyleistä:

Ominaisuuksien nimet, joissa on kaksi tai useampia sanaa, tulee kirjoittaa camel case (camelCase) -muodossa. Esimerkiksi CSS-ominaisuuden font-weight sijaan käytetään fontWeight;
CSS-ominaisuuksien arvoina käytetään yleensä merkkijonoja, paitsi ominaisuuksissa, jotka odottavat pelkkää numeroa. Tästä syystä fontWeight-ominaisuudessa käytetään numeroa (700) ja fontSize-ominaisuudessa merkkijonoa (32px).

Inline-tyylit erillisenä oliona

Jotta JSX-koodi pysyy selkeänä ja helposti luettavana, inline-tyylit voidaan määritellä erillisenä JavaScript-oliona ja liittää tämä olio style-attribuuttiin. Tämä lähestymistapa parantaa komponenttien ylläpidettävyyttä ja luettavuutta.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

Tässä esimerkissä esitellään appStyles-olio, joka sisältää samat tyylit kuin aiemmin, mutta nyt erillisenä oliona. Tämä vastuiden erottelu selkeyttää komponenttikoodia.

1. Mikä on keskeinen ero tyylien soveltamisessa HTML:ssä verrattuna Reactin inline-tyyleihin?

2. Mitä merkintätapaa tulee käyttää määriteltäessä ominaisuuksien nimiä, joissa on kaksi tai useampia sanoja inline-tyyleissä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 2

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain the advantages of using a separate style object over inline styles?

Are there any limitations or drawbacks to using inline styles in React?

How can I apply multiple style objects to a single element in React?

Awesome!

Completion rate improved to 2.17

Pyyhkäise näyttääksesi valikon

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);