JSX pragma is a compiler directive used in JavaScript frameworks like React to control how JSX syntax is transformed into executable JavaScript code, typically by converting it to calls to functions such as React.createElement. While most frameworks have built-in tooling, such as Babel, to handle this transformation, they also allow customization through the use of a custom JSX pragma, which can be defined either by adding an option to the Babel plugin or by setting a pragma comment at the beginning of a module. This approach enables developers to limit the impact of changes to specific modules, offering flexibility in how JSX is processed. Libraries like Emotion and Theme UI use custom JSX pragmas to integrate specific styling props like css and sx, thus allowing developers to style elements by referencing theme objects directly. This customization is particularly useful for those looking to tailor the transformation process to suit their application's needs, as seen in frameworks like Gatsby that incorporate these techniques for advanced theming capabilities.