2025-04-08 - Frontend Styles: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 22: | Line 22: | ||
==createComponent== | ==createComponent== | ||
===Parameter== | ===Parameter=== | ||
*themeStyle | *themeStyle | ||
object from userStyles get from userDetail in store after login, It store styletag as key and css as value | object from userStyles get from userDetail in store after login, It store styletag as key and css as value | ||
| Line 47: | Line 47: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
*overwritecssstyles | |||
object from objectConfig store styletag as key and css as value | |||
Revision as of 09:16, 9 April 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)}
`;
function
createComponent
Parameter
- themeStyle
object from userStyles get from userDetail in store after login, It store styletag as key and css as value eg.
themeStyle = {
styles: {
"componentXNavbar": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(204, 214, 166);\n transition: 0.3s;\n z-index: 5;\n height: 35px;",
"navbar": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(199, 242, 164);\n transition: 0.3s;\n z-index: 5;\n height: 35px;\n",
"specificInThisCOmpnonentBuyingNavbar": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(223, 232, 204);\n transition: 0.3s;\n z-index: 5;\n 35px;\n",
"tabulation_buyingNavbar_datatype": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(223, 232, 204);\n transition: 0.3s;\n z-index: 5;\n height: 35px;\n ",
"tabulation_buyingNavbar_navbar_datatype": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(204, 214, 166);\n transition: 0.3s;\n z-index: 5;\n height: 35px;",
"tabulation_datatype": " \n width: auto;\n flex-direction: row;\n padding: 5px;\n padding-right: 10px;\n background: rgb(199, 242, 164);\n transition: 0.3s;\n z-index: 5;\n height: 35px;\n"
}
};
- styletags
list of use styletag create from createStyleTags function eg.
["tabulation_ComplexFilter_filterData_section_dataType_sort","tabulation_ComplexFilter_section_dataType_sort","tabulation_section_dataType_sort"]
- overwritecssstyles
object from objectConfig store styletag as key and css as value