<\/p>\n\n\n\n
<\/p>\n
Styled components to w\u0142a\u015bnie jedna ze wspomnianych przeze mnie wy\u017cej funkcjonalno\u015bci. Styled components jest globalnym rozwi\u0105zaniem dla pisania ostylowanych element\u00f3w w kodzie JavaScript, kt\u00f3re b\u0119d\u0105 stanowi\u0142y komponenty reactowe. Dzi\u0119ki niej jeste\u015bmy w stanie napisa\u0107 ca\u0142o\u015b\u0107 kodu bez u\u017cycia plik\u00f3w css, scss czy less. Biblioteka ta mo\u017ce zosta\u0107 znaleziona na stronie https:\/\/styled-components.com\/.<\/a> Rozwi\u0105zanie pozwala nam r\u00f3wnie\u017c na stylowanie istniej\u0105cych ju\u017c komponent\u00f3w. Jedynym warunkiem, jaki musi spe\u0142ni\u0107 \u00f3w komponent, jest to, \u017ce powinien posiada\u0107 props className.<\/strong> Daje to nam bardzo du\u017c\u0105 elastyczno\u015b\u0107 w u\u017cyciu naszych element\u00f3w.<\/p>\n\n\n\n Doskona\u0142ym przyk\u0142adem u\u017cycia kontekstu, a w p\u00f3\u017aniejszych wersjach r\u00f3wnie\u017c hook\u00f3w, jest dobrze znana reactowcom biblioteka Redux. Realizuje ona zadanie przechowywania i propagowania danych w aplikacji b\u0105d\u017a w okre\u015blonym jej obszarze. Dlaczego \u0142\u0105czymy te koncepcje? Tak jak wcze\u015bniej wspomnia\u0142em, styled components pozwalaj\u0105 na napisanie w bardzo prosty spos\u00f3b styli w JavaScript dla element\u00f3w HTML,<\/strong> kt\u00f3re b\u0119d\u0105 odwzorowaniem tego, co mamy w szeroko znanych css-ach. Hook useContext natomiast umo\u017cliwiau dost\u0119pnienie danych ni\u017cszym komponentom w hierarchii.<\/p>\n\n\n\n Pami\u0119tacie setki zmiennych w less<\/strong> lub scss,<\/strong> kt\u00f3re pisali\u015bmy dla utrzymania sp\u00f3jno\u015bci kolorystyki i wygl\u0105du element\u00f3w? Teraz to wszystko mo\u017cemy przenie\u015b\u0107 na poziom JavaScript. Jest to tak zwany theming.<\/strong> Dok\u0142adn\u0105 dokumentacj\u0119 opisanego tutaj po\u0142\u0105czenia znajdziecie na stronie https:\/\/styled-components.com\/docs\/advanced#theming.<\/a><\/p>\n\n\n\n Theming to niesamowicie wygodne narz\u0119dzie, dzi\u0119ki kt\u00f3remu utrzymanie sp\u00f3jnego wygl\u0105du aplikacji b\u0119dzie du\u017co prostsze<\/strong>. Ponadto mo\u017cna dzi\u0119ki temu wyegzekwowa\u0107 u\u017cywanie przez programist\u00f3w sp\u00f3jnej nomenklatury dla wariant\u00f3w wygl\u0105du komponent\u00f3w.<\/p>\n\n\n\nconst Title = styled.h1`\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n`;<\/pre>\n\n\n\n
Biblioteka Redux w kontek\u015bcie\u2026 hook\u00f3w<\/h2>\n\n\n\n
Theming<\/h2>\n\n\n\n
\/\/ Define our button, but with the use of props.theme this time\nconst Button = styled.button`\n font-size: 1em;\n margin: 1em;\n padding: 0.25em 1em;\n border-radius: 3px;\n \n \/* Color the border and text with theme.main *\/\n color: ${props => props.theme.main};\n border: 2px solid ${props => props.theme.main};\n`;\n \n\/\/ We are passing a default theme for Buttons that arent wrapped in the ThemeProvider\nButton.defaultProps = {\n theme: {\n main: \"palevioletred\"\n }\n}\n \n\/\/ Define what props.theme will look like\nconst theme = {\n main: \"mediumseagreen\"\n};\n \nrender(\n <div>\n <Button>Normal<\/Button>\n \n <ThemeProvider theme={theme}>\n <Button>Themed<\/Button>\n <\/ThemeProvider>\n <\/div>\n);\n<\/pre>\n\n\n\n