Стилизация компонентов в React

Стилизация картинки Image

картинка находится в div
управление шириной нашего div

src\components\ui\image\
элемент image, у которого стилизаций может быть много
src\components\ui\image\image.js
собираем все стилизации

width:${props=>props.sizeWidth}
приходит параметр который отвечает за ширину данного блока
props параметры которые приходят в элемент
=> расшарить props.sizeWidth и в зависимости от этих props принимать какое то значение для данного элемента т.е. передавать ширину элемента

import styled from 'styled-components';

обращаемся к библиотеке styled 
и пишем необходимый тег (пример div) который будет заложен в основу данного компонента (в данном случае Image)
открывая кавычки в стиле scss прописывать свойства которые хоти этому элементу добавить
const Image = styled.div`
стили для конкретно этой картинки
width:${props=>props.sizeWidth}
height:200px;
overflow:hidden;
выравнивание по центру
display:flex;
align-items:center;

& img {
  width:100%;
}
`
export default Image;

src\components\ui\image\index.js
подключение всех созданных компонентов
подключение библиотеки styled-components

import Image from './Image';

export default Image;