Εργασία με CSS στυλ στο χαρακτηριστικό style στο React

Στα προηγούμενα μαθήματα, στο χαρακτηριστικό style περνάσαμε μια μεταβλητή που περιείχε ένα αντικείμενο με CSS στυλ. Μπορείτε να μην χρησιμοποιήσετε ενδιάμεση μεταβλητή, αλλά να γράψετε το αντικείμενο απευθείας στο χαρακτηριστικό - σε αυτήν την περίπτωση χρειαζόμαστε δύο ζευγάρι αγκύλες - η πρώτη για την JSX προσθήκη, και η δεύτερη - για το αντικείμενο.

Λοιπόν, ας πάρουμε το στοιχείο μας χωρίς CSS στυλ:

App.jsfunction App() {
  return (
    <div>
      <p>κείμενο</p>
      <p>κείμενο</p>
      <p>κείμενο</p>
    </div>
  );
}

Για παράδειγμα, ας ορίσουμε απευθείας τις CSS ιδιότητες για την πρώτη παράγραφο του στοιχείου React μας App:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  κείμενο
</p>

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

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

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        κείμενο
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        κείμενο
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        κείμενο
      </p>
    </div>
  );
}