Datu ievietošana style atribūtā no atsevišķa faila React

Mēs varam nerakstīt stilu objektus komponenta failā, kā tas tika darīts iepriekšējā nodarbībā, bet gan izveidot atsevišķu failu ar mūsu stilu objektiem un importēt tos vajadzīgajā komponentē.

Tātad, ņemsim mūsu komponentu bez CSS stiliem:

App.jsfunction App() {
  return (
    <div>
      <p>teksts</p>
      <p>teksts</p>
      <p>teksts</p>
    </div>
  );
}

Izveidosim mapē src atsevišķu failu styles.js, kurā ierakstīsim mūsu stilu objektus:

styles.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center',
};

const class2 = {
  color: 'orangered',
  fontWeight: 'bold',
};

const class3 = {
  fontStyle: 'italic',
  color: 'brown',
};

const class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
};

Neaizmirsīsim faila styles.js apakšā eksportēt mūsu objektus kā vienu objektu styles:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

Tagad importēsim objektu styles mūsu komponentē:

App.jsimport { styles } from "./styles";       

Tagad mēs varam piemērot vajadzīgo objektu ar CSS stiliem no kopējā objekta styles mūsu elementiem. Piemērosim pirmajam rindkopai stilus no objekta class2:

App.js<p style={styles.class2}>teksts</p>

Līdzīgā veidā pievienosim stilus no objektiem pārējiem elementiem.

Rezultātā komponenta kods izskatīsies šādi:

App.jsfunction App() {
  return (
    <div style={styles.class1}>
      <p style={styles.class2}>teksts</p>
      <p style={styles.class3}>teksts</p>
      <p style={styles.class4}>teksts</p>
    </div>
  );
}