You can use the styling bar on the right-hand side to style your canvas
Simply click on an element or Ant Design (AntD) component on the canvas. The right sidebar will reveal all styling options available for the selected item.
***
## Customise Component Style
### Option 1: Write CSS Properties
If you’re familiar with coding, you can directly add CSS properties under the `element.style` section.
* **How it works:**\
Type CSS as you would in an IDE. JSX.Design provides intelligent suggestions to make your workflow faster and error-free.
* **Example:**\
`background-color: #f0f0f0;`\
`border-radius: 10px;`
### Option 2: Style Visually
For a more intuitive approach, use the visual styling options available in the sidebar.
#### Visual Styling Options:
* **Layout:** Adjust layout properties like `display`, `alignment`, and `positioning`.
* **Spacing:** Modify `margin` and `padding` values to control spacing around the element.
* **Size:** Configure dimensions, including `height`, `width`, `min/max` constraints, and more.
* **Typography:** Change font styles, sizes, colors, and text formatting.
* **Background:** Set background colors, add images, and adjust image positioning.
* **Appearance:** Define border styles and toggle visibility (hide/unmount elements).
{% hint style="info" %}
We will be covering more CSS properties to be able to edit visually. For any property not covered in the visual options, you can use the `element.style` section to add custom CSS manually.
{% endhint %}
***
## Manage Props
Navigate to the **Props Tab** to add and manage properties for elements and components.
#### What can you do:
* Create custom props and access them via code.
* Add AntD-specific props, which instantly reflect changes in the editor.
{% hint style="info" %}
Get a list of ANT.D components and their props from their [website](https://ant.design/components/overview/).
{% endhint %}
**Learn More:** Check out the detailed guide on creating and using Props:
***
## Add Custom CSS (SCSS Support)
If you need more advanced styling, you can write custom CSS directly:
* Select a component and go to the **Custom SCSS** tab in the sidebar.
* Enter your CSS in a familiar editor, making it easy to add complex styles manually.
Example:
```css
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
```
***
## Edit the Global CSS File
For project-wide styles, you can edit the global CSS file:
* Click the **global-style.css** button on the top right (next to the *Export Code* button).
* Make updates that apply across all components and elements in your project.
***
## Suggested Enhancements
* Combine global and custom CSS for consistent design systems.
* Use props dynamically to create reusable and adaptable components.
* Mix visual and manual styling for the perfect balance between speed and precision.
***
#### **Next Steps:**
Great! Let's move on to other exciting topics:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://skyslit.gitbook.io/jsx.design/styling-ui/images-and-media.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.