Improve styles in playground's Live panel

[feihong]

Add some basic styles to the Live panel so that simple component examples like this don't need extra styles added to make them legible.

module Speech = {
  type utterance;

  [@mel.new]
  external makeUtterance: string => utterance = "SpeechSynthesisUtterance";

  external speak: utterance => unit = "speechSynthesis.speak";
};

module App = {
  [@react.component]
  let make = () =>
    <button
      onClick={_ =>
        "Hello ReasonReact" |> Speech.makeUtterance |> Speech.speak
      }>
      {React.string("Say hello")}
    </button>;
};

let () =
  switch (ReactDOM.querySelector("#preview")) {
  | None =>
    Js.log("Failed to start React: couldn't find the #preview element")
  | Some(root) =>
    let root = ReactDOM.Client.createRoot(root);
    ReactDOM.Client.render(root, <App />);
  };

In Playground, the above snippet renders like this:

In order to make it render in reasonable way, I have to add extra styles to the button:

module App = {
  [@react.component]
  let make = () =>
    <button
      style={ReactDOM.Style.make(
        ~fontSize="1em",
        ~border="1px solid white",
        ~borderRadius="0.5em",
        ~padding="1em",
        (),
      )}
      onClick={_ =>
        "Hello ReasonReact" |> Speech.makeUtterance |> Speech.speak
      }>
      {React.string("Say hello")}
    </button>;
};