2025-04-08 - Frontend Styles

styled-components concept

Concept

• Every styleComponet tag can use the same fotmat and every html Tag can use the same styleComponet tag and send propperties to each styleComponet tag for use different cssStyle.
• store all css as object in themeStylesDefault.js.
• mixed cssStyle from defaultCss and objTypeCss.
• defaultCss is look like "tabulation_section_dataType_sort", It only first index of cssPrefix join by "_" with cssSuffix
• objTypeCss is look the same daefaultCss but insert serviceTag and objectType after fist index separate by "_",It look like "tabulation_serviceTag_objectType_section_dataType_sort"
• objTypeCss can cut objectType and left only serviceTag, So objTypeCss can have 2 style.It look like "tabulation_serviceTag_section_dataType_sort"
• objTypeCss will always ovewrite defaultCss (can read more in createComponent function process)

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

themeStyle

• type 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: {
    "tableConfig_serviceTag_buyingNavbar_datatype": "width: auto; padding: 5px;  padding-right: 10px;  background: rgb(204, 214, 166);  transition: 0.3s;  z-index: 5;  height: 35px;",
    "tableConfig_buyingNavbar_datatype": "width: auto;    flex-direction: row;   padding: 5px;   padding-right: 10px;    background: rgb(199, 242, 164);   transition: 0.3s;   z-index: 5;  height: 35px;",
    "tableConfig_serviceTag_buyingNavbar_datatype": "width: auto;   flex-direction: row;   padding: 5px;   padding-right: 10px;  background: rgb(223, 232, 204);   transition: 0.3s;  z-index: 5;  35px;",
    "tableOutput_serviceTag_objectType_buyingNavbar_datatype": "width: auto;  flex-direction: row; padding: 5px; padding-right: 10px;  transition: 0.3s;  z-index: 5;   height: 35px;",
    "tableOutput_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;",
    "tableOutput_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

• type array(can be undefined)
• list of use styletag create from createStyleTags function

eg.

["tableConfig_serviceTag_objectType_section_dataType_sort","tableConfig_serviceTag_section_dataType_sort","tableConfig_section_dataType_sort"]

overwritecssstyles

• type string(can be undefined)
• Css value obtained from the objectConfig followed by the style tag as a key.

 `color: blue;
  margin: 0px 3px;
  background-color: transparent;
  transition: 0.3s;
  font-size: 17px;`

function process

• Use styleTags to get CssStyle from themeStyle and themeStylesDefault
• When searching for styleTag in themeStylesDefault, the function starts searching for styleTag from the last index first, then searches the second index, and then the first index.
• The last index is defaultStyleTag , which does not specify an objType , but the remaining two indexes are objTypeStyeTag , which does specify an objType , with this process objTypeStyeTag will overwrite defaultStyleTag .
• 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

cssPrefixs

• type array(requried)
• List of string create by createCssPrefixs function store at least 1 item but not more than 3 item.
• Reade more and watch example in createCssPrefixs function.

suffix

• type 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.
• Reade more and watch example in createCssSuffix function.

return result

• type array

["tableOutput_serviceTag_objectType_section_dataType_sort","tableOutput_objectType_section_dataType_sort","tableOutput_section_dataType_sort"]

createCssPrefixs

defaultPrefix

• type string(requried)
• Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.

cssPrefixes

• type array(can be undefined)
• List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.It look like ["serviceTag", "objectType"]

return result

type array

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

createCssSuffix

defaultSuffix

• type string(requried)
• Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.

localSuffix

• type 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"