rjsf-team/react-jsonschema-form

A 'raw' theme, without any styles applied

Open

#4,492 opened on Feb 10, 2025

View on GitHub
 (5 comments) (1 reaction) (0 assignees)TypeScript (2,136 forks)batch import
featurehelp wantedtheme-request

Repository metrics

Stars
 (13,175 stars)
PR merge metrics
 (Avg merge 3d 3h) (42 merged PRs in 30d)

Description

Prerequisites

What theme are you using?

core

Is your feature request related to a problem? Please describe.

I would like to control the UI of the form, but currently using the "core" library assumes usage of Bootstrap.

Describe the solution you'd like

  1. A "raw" version of the form, with no classes/styles applied.
  2. A way to apply/override classes to specific elements, at a global level, for example:
{
    field: "my-field-class",
    input: "my-input-class",
}

Describe alternatives you've considered

What I am currently doing is copying all the code for the core library, and adding a class to style with CSS.

I don't like this approach as this also duplicates logic (and I'm not changing any of that, literally adding a class, so I can then override bootstrap) - I feel this leaves me vulnerable to breaking changes.

Contributor guide

Research direction
The issue requests a 'raw' theme without any styles and a mechanism to apply custom global classes. Start by examining the existing theme implementation in the repository, particularly the 'core' theme, which currently assumes Bootstrap. Look at how themes are structured in the source code, likely in a 'themes' directory. The discussion in the issue may contain suggestions from maintainers about the approach. The task involves creating a new theme that renders form elements with no default classes, and adding a configuration option for custom class names. It would be helpful to review issues or PRs related to theming to understand the architecture.
Tech stack
typescriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Reactreact json schema formtheming system
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45