Расширенная стилизатсияи компонентҳо дар React
Фарз кунем, ки мо компоненти React
Block дорем ва дар он компонентҳои
стилизатсиякардашуда бо истифода аз Styled Components сохтаем,
Button ва Container:
const Container = styled.div`
display: flex;
flex-direction: column;
width: 150px;
`;
const Button = styled.input`
background-color: orange;
font-size: 18px;
margin: 5px;
`;
Ва акнун фараз кунем, ки мо компоненти дигари
Button лозим аст, фақат бо
матини тугмаи сафед ва замини сабз.
Барои ин, кофист, ки дар асоси
компоненти мо Button нав
компоненти MdButton эҷод кунем ва дар он
фақат хусусиятҳоееро, ки мехоҳем тағир диҳем, нависем:
const MdButton = styled(Button)`
color: white;
background-color: green;
`;
Ҳамаи компонентҳои стилизатсиякардаи худро дар Block ҷойгир кунем:
function Block() {
return (
<Container>
<Button>btn0</Button>
<MdButton>btn1</MdButton>
</Container>
);
}
Компоненти React-и холӣ Block1 эҷод кунед.
Бо истифода аз Styled Components
дар он диви стилизатсиякардае бо бараш ва дарозиаш
150px, замини зард,
ва барашҳои сарҳад2px эҷод кунед,
онро DIVA номгузорӣ кунед.
Дар асоси диви аз вазифаи қаблӣ ҳамон
дивро DIVB эҷод кунед, фақат бо замини сабз
ва барашҳои сарҳад ба 3px.
Дар Block1 диве Container эҷод кунед.
Дар он ду компоненти DIVA
ва байни онҳо як DIVB-ро, ки шумо
дар вазифаҳои қаблӣ ба ин дарс эҷод кардаед, ҷойгир кунед.