2025-04-08 - Frontend Styles: Difference between revisions
Jump to navigation
Jump to search
(Created page with "= styled-components concept= * use "Izara" + html tag + "Style" * html tag = using tag <syntaxhighlight lang="JavaScript"> const IzaraInputStyle = styled.input </syntaxhighlight>") |
No edit summary |
||
| Line 1: | Line 1: | ||
= styled-components concept= | = styled-components concept= | ||
===Style Tag Name=== | |||
* use "Izara" + html tag + "Style" | * use "Izara" + html tag + "Style" | ||
* html tag = | * html tag = same tag with styled.tag | ||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
const IzaraInputStyle = styled.input | const IzaraInputStyle = styled.input | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===Style Tag Syntax=== | |||
<syntaxhighlight lang="JavaScript"> | |||
export const IzaraTextSpanStyle = styled.span` | |||
${(props) => createComponent(props)} | |||
`; | |||
</syntaxhighlight> | |||
=function= | |||
===createComponent=== | |||
Revision as of 09:13, 20 March 2025
styled-components concept
Style Tag Name
- use "Izara" + html tag + "Style"
- html tag = same tag with styled.tag
const IzaraInputStyle = styled.input
Style Tag Syntax
export const IzaraTextSpanStyle = styled.span`
${(props) => createComponent(props)}
`;