2025-04-08 - Frontend Styles

styled-components concept

StyleTag Name Format

• use "Izara" + html tag + "Style"
• html tag = same tag with styled.tag

const IzaraInputStyle = styled.input

StyleTag Syntax

export const IzaraTextSpanStyle = styled.span`
  ${(props) => createComponent(props)}
`;

function

createComponent

Parameter

• themeStyle(object)

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"
  }
};

• styletag(array)

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(string)

Css value obtained from the objectConfig followed by the style tag as a key.

function process

• use styleTags to get CssStyle from themeStyle and themeStylesDefault
• themeStylesDefault is object from local create by dev,It store styletag as key and css as value like themeStyle object
• create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles