2025-04-08 - Frontend Styles

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

=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
• overwritecssstyles