Εισαγωγή δεδομένων στο χαρακτηριστικό style από αντικείμενο στο React

Τα CSS στυλ μπορούν επίσης να προστεθούν στα στοιχεία χρησιμοποιώντας το χαρακτηριστικό style. Σε αυτό και στα επόμενα μαθήματα θα εξετάσουμε μεθόδους ενσωματωμένης στυλιστικής.

Τώρα δεν θα συνδέσουμε το αρχείο styles.css, αλλά θα μεταφέρουμε τις αντίστοιχες τιμές στο χαρακτηριστικό style ως αντικείμενο με στυλ για κάθε ετικέτα, τα οποία θα γράφουμε απευθείας στο αρχείο του στοιχείου.

Λοιπόν, ας πάρουμε το στοιχείο μας χωρίς CSS στυλ, που φτιάξαμε στο προηγούμενο μάθημα:

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

Ας δημιουργήσουμε στο αρχείο App.js πριν από την εντολή return ένα αντικείμενο με CSS στυλ για το div σε μια μεταβλητή class1. Θυμηθείτε ότι τα ονόματα των ιδιοτήτων εδώ γράφονται σε camelCase σημειογραφία, και οι τιμές των ιδιοτήτων πρέπει να περικλείονται σε εισαγωγικά:

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

Τώρα ας προσθέσουμε το αντικείμενο class2 με στυλ για την πρώτη παράγραφο:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

Το αντικείμενο class3 με στυλ για τη δεύτερη παράγραφο:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

Και τέλος, το class4 για την τελευταία:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

Τώρα, για να εφαρμόσουμε στο στοιχείο τις CSS κλάσεις, θα χρησιμοποιήσουμε το χαρακτηριστικό style. Για την πρώτη παράγραφο είχαμε τη μεταβλητή class2, ας την περάσουμε ως τιμή:

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

Παρόμοια, θα προσθέσουμε στυλ από αντικείμενα για τις υπόλοιπες ετικέτες.

Ως αποτέλεσμα, ο κώδικας του στοιχείου θα μοιάζει ως εξής:

App.jsfunction App() {
  const 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',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}