Styled Components ilə React-də Propların Istifadəsi

Əvvəlki dərsdən biz öyrəndik ki, Styled Components kitabxanası vasitəsi ilə yaradılmış komponentləri adi React komponentləri kimi istifadə etmək olar. Bu dərsdə biz görəcəyik ki, burada proplar da eyni qaydada işləyəcək.

Tutaq ki, bizim Block adlı React komponentimiz var və biz onun daxilində Styled Components vasitəsi ilə Input və Container adlı stilizə edilmiş komponentlər yaratmışıq:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Gəlin üç Input komponentini Container-in daxilinə yerləşdirək:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Proplardan istifadə edərək, biz komponentlərə müxtəlif atributlar təyin edə bilərik. Gəlin ikinci inputa placeholder və type atributlarını, müvafiq olaraq name və text dəyərləri ilə, üçüncü inputa isə type atributunu password dəyəri ilə təyin edək:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Boş bir Block React komponenti yaradın, onun daxilində üç düymə olan bir div hazırlayın. Styled Components kitabxanasından istifadə edərək, bu divi və düymələri stilizə edin. Proplardan istifadə edərək, birinci düyməni deaktiv edin, üçüncü düyməni isə reset tipində edin.