Använda props med Styled Components i React

Från föregående lektion lärde vi oss att stylade komponenter med biblioteket Styled Components kan användas som vanliga React komponenter. I denna lektion kommer vi att se att props fungerar på ett liknande sätt här.

Anta att vi har en React-komponent Block och vi har skapat stylade komponenter i den med Styled Components: Input och Container:

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

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

Låt oss placera tre Input-komponenter i Container:

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

Genom att använda props kan vi sätta olika attribut i komponenterna. Låt oss sätta attributen placeholder och type för den andra inputen med värdena name och text, respektive, och för den tredje inputen sätter vi attributet type till värdet password:

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

Skapa en tom React-komponent Block, gör en div i den som innehåller tre knappar. Med hjälp av biblioteket Styled Components, styla denna div och knapparna. Använd props för att inaktivera den första knappen och gör den tredje till typen reset.