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)(can be undefined)

object from userStyles get from userDetail in store after login, It store styletag as key and css as value eg.

themeStyle = {
  styles: {
    "componentXNavbar": "width: auto;  flex-direction: row;  padding: 5px;  padding-right: 10px;  background: rgb(204, 214, 166);  transition: 0.3s;  z-index: 5;  height: 35px;",
    "navbar": "width: auto;    flex-direction: row;   padding: 5px;   padding-right: 10px;    background: rgb(199, 242, 164);   transition: 0.3s;   z-index: 5;   height: 35px;",
    "specificInThisCOmpnonentBuyingNavbar": "width: auto;   flex-direction: row;   padding: 5px;   padding-right: 10px;  background: rgb(223, 232, 204);   transition: 0.3s;  z-index: 5;  35px;",
    "tabulation_buyingNavbar_datatype": "width: auto;  flex-direction: row;   padding: 5px;   padding-right: 10px;    background: rgb(223, 232, 204);   transition: 0.3s;   z-index: 5;   height: 35px;",
    "tabulation_buyingNavbar_navbar_datatype": "width: auto;   flex-direction: row;   padding: 5px;    padding-right: 10px;    background: rgb(204, 214, 166);  transition: 0.3s;  z-index: 5;  height: 35px;",
    "tabulation_datatype": "width: auto;   flex-direction: row;   padding: 5px;   padding-right: 10px;    background: rgb(199, 242, 164);  transition: 0.3s;   z-index: 5;   height: 35px;"
  }
};

• styletags(array)(can be undefined)

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)(can be undefined)

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

return result

type string

  color: blue;
  margin: 0px 3px;
  background-color: transparent;
  transition: 0.3s;
  font-size: 17px;
  display: flex;
  align-items: center;
    :hover{
      opacity: 0.6;
      color: #B3DBD8 ;
    }
  color: red;

• About CSS, if the same property exists, such as in the CSS example above, with two color properties, the CSS will cause the bottom line property to overwrite the top line property. In the example, red overwrites blue.

createStyleTags

Parameter

• createCssPrefixs(array)(requried)

List of string create by createCssPrefixs function store at least 1 item but not more than 3 item

• createCssSuffix(string)(requried)

A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table. Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.

return result

type array

["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"]

createCssPrefixs

Parameter

• defaultPrefix(string)(requried)

Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.

• cssPrefixes(array)(can be undefined)

List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.

return result

type array

//if not have cssPrefixes
["tableConfig"]
//have cssPrefixes
["tableConfig", "serviceTag", "objectType"]

createCssSuffix

Parameter

• defaultSuffix(string)(requried)

Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.

• localSuffix(string)(can be undefined)

Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"

return result

type string

//if not have localSuffix
"row"
//have localSuffix
"row_rowSpan_2"