Basic styling

Customizing the appearance of elements and components in JSX.Design is straightforward and versatile. Whether you prefer visual styling or manual CSS, JSX.Design has options tailored to your workflow.

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).

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.

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.

Get a list of ANT.D components and their props from their website.

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:

.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:

PreviousExporting your codeNextCreating reusable components

Last updated