Skip to main content

Styled Components

Styled Component allows you to save the styles applied to a component and reuse them on the current page or other pages. This way, you can create components with the same design more quickly and consistently.

Create New Styled Component​

  • To create a Styled Component, click on the component you want to style, open the Style tab, and select Create or Select a Styled Component. Then, give your component a name and save it. Once created, you can reuse it on other pages, ensuring consistency and efficiency in your design process

  • The styled component created from the Styled Components file can be seen on the left.

  • When you activate the Start Working mode on your styled component, the editing and the deleting settings will become available. In the options section, you can perform various actions such as Save, Delete, and Reset.

  • You can click the Edit Styled Component button or the Styled Components file on the left to edit the styled component you saved. When you make changes and save, you will see that the components using that styled component have been updated.

  • Additionally, the colors and fonts you select in the Themes Settings in the settings will appear as options in the relevant sections of the Style tab in the styled component.

Existing Styled Component​

  • A component saved as a styled component can be replaced with another styled component.

  • To detach a styled component from a component, simply press the Detach Styled Component button. Your styled component is not deleted; you are only separating the component from the styled component.

Change Dynamically Styled Component​

  • You can change the styled component feature of the component access through the code screen as in the example. You can only set one of the components that is the same with the styled components you added. Otherwise, there will be an error.
    components.EdtrComp_1.styledComponent = "exampleStyledComponent"