React හි Styled Components භාවිතයෙන් විලාසිතා කිරීම

පෙර පාඩම් වලදී අපි ගෝලීය CSS සහ අන්තර්ගත විලාසිතා කිරීමේ ක්‍රම බැලුවෙමු. මෙම පාඩමේදී අපි විශාල යෙදුම් සඳහා වඩාත් ඵලදායී ප්‍රවේශයක් සමඟ වැඩ කරමු - පුස්තකාලය භාවිතය styled-components.

එසේනම්, අපගේ CSS විලාසයන් නොමැති component එක ගනිමු, අපි එය පෙර පාඩම් වලදී භාවිතා කළෙමු:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

පළමුව, පුස්තකාලය ස්ථාපනය කරමු Styled Components:

terminalnpm install --save styled-components

ඉන්පසු අවශ්‍ය පැකේජය component එකට ආයාත කරමු App:

App.jsimport styled from 'styled-components';

දැන් අපට ටැග් වලට විලාසිතා ආවරණය කර ඒවා React components ලෙස යෙදිය හැකිය, නමුත් දැන් JS තුළම සම්බන්ධ කර ඇති විලාසයන් සමඟ. මෙම ප්‍රවේශය තවදුරටත් CSS in JS ලෙස හැඳින්වේ.

පළමු ඡේදය විලාසිතා කරමු. මේ සඳහා App ශ්‍රිතයට පෙර ආයාත පේළි වලින් පසුව component එකක් නිර්මාණය කරමු Text1. වස්තුවේ styled පුස්තකාලයෙන් අපට ඡේදයක් අවශ්‍යය, එබැවින් අපි ලියන්නෙමු styled.p. ඉන්පසු, ටෙම්ප්ලේට් නූල තුළ අවශ්‍ය CSS විලාසයන් ලැයිස්තුගත කරන්න - සාමාන්‍ය CSS වල මෙන්:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

ඔබට පෙනෙන පරිදි, අපි මෙහි අවධානය යොමු කරන්නේ බොහෝ පහසු වන ටෙම්ප්ලේට් නූල් ආකාරයෙන් පිරිසිදු CSS, ය. ඒ හා සමානව අපට මාධ්‍ය විමසුම්, සුළු අගයන්, තෝරන්නන් සහ CSS හි වෙනත් ක්‍රියාකාරිත්වය භාවිතා කළ හැකිය.

දැන් ශ්‍රිතය තුළ component App ටැගය ප්‍රතිස්ථාපනය කරන්න p අප විසින් නිර්මාණය කරන ලද component මත Text1 CSS විලාසයන් සමඟ:

App.js<Text1>text</Text1>     

ඒ හා සමානව විලාසිතා කරන්න දෙවන සහ තෙවන ඡේද. මේ සඳහා components සාදන්න Text2 සහ Text3:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

අවසානයේ, විලාසිතා කරන්න අපගේ div. මේ සඳහා component එකක් සාදන්න සහ එය නම් කරන්න Container:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

අපගේ සියලුම ටැග් ප්‍රතිස්ථාපනය කරන්න components:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

මෙම ප්‍රවේශයට ස්තූතිවන්ත වන්නට නැවත නැවත භාවිතා කළ හැකි විලාසයන් සහිත components නිර්මාණය කළ හැකිය.

ඔබ බ්‍රව්සරයේ සංවර්ධක පැනලයේ ජනනය කරන ලද අඩංගු කිරීම විවෘත කරන්නේ නම්, ඔබට පෙනෙනු ඇති එක් එක් component සඳහා තමන්ගේම අනන්‍ය වර්ග ජනනය කර ඇති බව. මේ අනුව, අපට තවදුරටත් classes අතර ගැටුම් ගැන කරදර වීමට අවශ්‍ය නොවේ වෙනම components.

ඒ හා සමානව, components විලාසිතා කළ හැකිය, භාවිතා කිරීම, උදාහරණයක් ලෙස, පුස්තකාලය Emotion.