[UI] - Allow Override of Inline Styles in Components

[phongnguyen-it]

Title: [UI] - Allow Override of Inline Styles in Components

Description:

Currently, the component uses hardcoded inline styles like the following:

<div style={{ border: '1px solid #bebebe' }}>
  <div style={{ margin: '16px 16px 0 16px', overflow: 'auto', paddingBottom: '16px' }}>

This makes it difficult to apply custom styles that align with our design system tokens. I need the ability to override these inline styles to ensure consistency with our design guidelines.

Please consider adding support for style overrides, possibly through props or by removing inline styles, to allow greater flexibility in styling components.

Thank you for your assistance!

[phongnguyen-it]

Currently, workaround with code:

import React, {useEffect} from 'react';
import { Playground } from 'storybook-addon-code-editor';

const LIVE_CODE_CLASS_NAME = '.sb-live-code_wrapper';
const LiveCodePlayground = (props: typeof Playground) => {

    useEffect(() => {
        const targetElement = document.querySelector(LIVE_CODE_CLASS_NAME);
        if (targetElement && targetElement.parentElement && targetElement.parentElement.parentElement) {
            const grandparent = targetElement.parentElement.parentElement;
            grandparent.style.border = '1px solid var(--border)';
            grandparent.style.borderTopLeftRadius = '8px';
            grandparent.style.borderTopRightRadius = '8px';
        }
    }, []);

    return <Playground {...props} />
};

export default LiveCodePlayground;