Использование пропсов с Styled Components в React
Из прошлого урока мы узнали, что стилизованные при помощи библиотеки Styled Components компоненты можно использовать как обычные React компоненты. В данном уроке мы увидим, что здесь подобным образом будут работать и пропсы.
Предположим у нас есть React компонент
Block и мы создали в нем стилизованные
при помощи Styled Components компоненты
Input и Container:
const Container = styled.div`
display: flex;
flex-direction: column;
width: 150px;
`;
const Input = styled.input`
margin: 5px;
font-size: 18px;
`;
Расположим три компонента Input в
Container:
function Block() {
return (
<Container>
<Input />
<Input />
<Input />
</Container>
);
}
Используя пропсы, мы можем устанавливать
в компонентах различные атрибуты. Давайте
установим второму инпуту атрибуты
placeholder и type со
значениями name и text,
соответственно, а третьему инпуту у атрибута
type установим значение password:
function Block() {
return (
<Container>
<Input />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
);
}
Создайте пустой React компонент Block,
сделайте в нем див, в котором будет три
кнопки. При помощи библиотеки Styled Components,
стилизуйте этот див и кнопки. Используя
пропсы, заблокируйте первую кнопку, а
третьей сделайте тип reset.