Существует несколько способов стилизовать ваше приложение React с помощью CSS. В этом блоге я расскажу о двух самых популярных способах – (1) Встроенный стиль и (2) Стили -листы . Это чтение будет коротким и сладким. Давай стиль!

(1) Встроенный стиль полезен для оценки стиля для элемента, который вы хотите:

render() {

    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1x solid blue',
      padding: '8px',
      cursor: 'pointer'
    };

  return(
      

        
Hi, I'm a React App!!
        
You are a great programmer!
        Toggle Something
         {SomeDynamicContent}
      
     )
...

Заметьте в приведенном выше коде, что Const Style определяется внутри метода рендеринга, но выше возврата. Кроме того, имейте в виду, что ключи должны находиться в верблюдах, в то время как значения являются строками и должны быть в кавычках.

(2) Стили -листы Анкет Ниже приведен пример того, как создать и использовать файл CSS, чтобы стилизовать компонент в вашем приложении React.

// this code in the Person.css file

.Person {
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align: center;
}

Ничего особенного в коде выше. Это файл CSS, созданный в той же папке, что и файл JS ниже. Эта структура файла рекомендуется, чтобы помочь избежать путаницы. Несмотря на то, что два файла живут в одной и той же папке и имеют одинаковое имя, код, записанный в файле Person.css, не подходит для файла Person.js; это Глобальный код CSS Анкет Использование того же имени, что и компонент, облегчает случайное избегание, используя стиль где -то еще в приложении позже.

// this code is in the Person.js file


   
I'm {props.name} and I am 
   {props.age} years old!
   
{props.children}
   

В приведенном выше коде вы заметите следующую строку

// this code is in the Person.js file
import './Person.css'
...


   
I'm {props.name} and I am 
   {props.age} years old!
   
{props.children}
   

Примечание Импорт './person.css' В фрагменте кода выше. Таблица стиля должна быть импортирована в компонент. Что вы замечаете о './Person.css' ? Из ‘./’ ‘. Есть предположение о том, как назван родительская папка? Если вы догадались «человек», вы ошибаетесь. Просто шучу. Конечно, это “человек”.

В React есть два популярных варианта стиля с CSS. Самым популярным является (1) Встроенный стиль Анкет Использование встроенного стиля также имеет преимущество в том, чтобы оценить код по элементу, который вы хотите, и может быть записано в том же файле. (2) Стили -листы Также распространены, и лучше всего обратить внимание на именование вашего файла. Это поможет вам избежать случайного смешивания, где в вашем приложении используется таблица стилей. Кроме того, не забудьте импортировать таблицу стилей в компонент, в котором вы хотите использовать ее.

Надеюсь, ты что -то узнал! Как всегда, пожалуйста, поделитесь, поделитесь и оставьте отзывы, если вы нашли ценность в моей работе.

Этот пост является частью серии, которую я пишу на React. Проверьте эти 👇 👇

Рендеринг условных в React

rwparrish ・ 16 октября ・ 6 мин читать

Реактируйте основы

rwparrish ・ 8 октября ・ 6 мин читать

Счастливого кодирования!

Оригинал: “https://dev.to/rwparrish/two-css-styling-options-in-react-4pik”