Главная » React & Redux » Продолжаем знакомство с React: стилизуем контент методами библиотеки.

Продолжаем знакомство с React: стилизуем контент методами библиотеки.


28.08.2021, 23:12
Стилизация контента методом библиотеки React подразумевает создание внутри компонента объекта, в котором будут содержаться CSS-свойства и их значения.

Затем, с помощью атрибута style этот объект назначается тем JSX-элементам, которые нужно стилизовать.

Возьмём для примера наш компонент из предыдущей статьи:

Код

         let container = document.querySelector('#container');

         class Letter extends React.Component {
             render() {
                 return(
                     <div>
                          {this.props.children}
                     </div>
                 );
             }
         }

Создаём внутри него объект со стилями, которые нужно применить:

Код

         class Letter extends React.Component {
             render() {

                 let letterStyle = {
                     padding: 10,
                     margin: 10,
                     backgroundColor: "#FFDE00",
                     color: "#333333",
                     display: "inline-block",
                     fontFamily: "monospace",
                     fontSize: 32,
                     textAlign: "center"
                 };
                 return(
                     <div>
                          {this.props.children}
                     </div>
                 );
             }
         }

Определим элемент, к которому нужно применить стили, прописанные в объекте letterStyle, это блок div, возвращаемый функцией render компонента Letter.

Устанавливаем ему атрибут style со ссылкой на объект со стилями:

Код

         let container = document.querySelector('#container');

         class Letter extends React.Component {
             render() {

                 let letterStyle = {
                     padding: 10,
                     margin: 10,
                     backgroundColor: "#FFDE00",
                     color: "#333333",
                     display: "inline-block",
                     fontFamily: "monospace",
                     fontSize: 32,
                     textAlign: "center"
                 };
                 return(
                     <div style = {letterStyle}>  
                          {this.props.children}
                     </div>
                 );
             }
         }


Вуаля! Мы стилизовали выводимый на страницу текст!

Как сделать, чтобы у каждой буквы в слове REACT, выведенном на странице, был свой цвет фона?

Для начала добавляем атрибут bgcolor в методе ReactDOM.render(), для каждого экземпляра атрибута добавляем разный цвет фона:

Код

         ReactDOM.render(
             <div>
                 <Letter bgcolor = "#58b3ff">R</Letter>
                 <Letter bgcolor = "#ff605f">E</Letter>
                 <Letter bgcolor = "#ffd52e">A</Letter>
                 <Letter bgcolor = "#49dd8e">C</Letter>
                 <Letter bgcolor = "#ae99ff">T</Letter>
             </div>,
             container
         );

Чтобы использовать это свойство, в объекте letterStyle заменим значение свойства backgroundColor на this.props.bgcolor.

Полный код скрипта на данный момент:

Код

     <div id="container"></div>

     <script type="text/babel">
         let container = document.querySelector('#container');

         class Letter extends React.Component {
             render() {

                 let letterStyle = {
                     padding: 10,
                     margin: 10,
                     backgroundColor: this.props.bgcolor,
                     color: "#333333",
                     display: "inline-block",
                     fontFamily: "monospace",
                     fontSize: 32,
                     textAlign: "center"
                 };
                 return(
                     <div style = {letterStyle}>
                          {this.props.children}
                     </div>
                 );
             }
         }

         ReactDOM.render(
             <div>
                 <Letter bgcolor = "#58b3ff">R</Letter>
                 <Letter bgcolor = "#ff605f">E</Letter>
                 <Letter bgcolor = "#ffd52e">A</Letter>
                 <Letter bgcolor = "#49dd8e">C</Letter>
                 <Letter bgcolor = "#ae99ff">T</Letter>
             </div>,
             container
         );
     </script>


Теперь у каждой буквы свой цвет фона

КОММЕНТАРИИ (0)