Puck? React? ?? ?? ??? ????, ??? ??? ??? ?? ?? ??? ?????. GitHub?? ??? ???! ??

---

Puck? ??? ?? ??? ??? ? ???? ?? ??? ???? ?? ?? ??? ??? ?? ?? ??? ??? ???? ??? ? ??? ?? ????.

?? ?? ???? ???? ?? ??? ?? ??? ???? ?? ???? ????? ??? ? ?? ??? ?????. ???? ??? ????.

Puck? ??? React ??????? ? ??? ???? ??? ????(?? ? ??? ??? ???? ? ???). ? ????? ?? ?????? ?? ??? ?? ?? ? ??? CSS ??? ??? ? ????. ???? ???!

? ??????? ??? Puck? ? ??? ?? ???? ??? ?? ??? ???????. Puck? ?? ???? ???? ???? ???. ?? ????? ???! ??? ?? ??? ????? ?? ???? ???? ?? ????.

Vite? ??? ???? ??

Vite? ???? ????? ???? ????? ???? ??? ???????. ?? Puck? ??? ????? ??? ? ??? ???? ????? ???.

Next.js ?? Remix? ???? ?? ?? Puck ??? ? ??? ???? ????? ??? ?? ????.

???? ??

????? ???? ?? ?? ??? ???? ? Vite ????? ????.

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

? ??

???? Puck ???? ?????.

npm i @measured/puck --save

???? ??? ??

Vite? ? ????? ???? Puck? ???? ???? ? ?? ?? ???? ?? ?????. ? ??? ????? src/index.css ? src/App.css? ??? ?? src/main.jsx ? src/App.jsx?? ????? ?????.

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Puck ??? ???

?? ???? ??? ???? src/App.jsx ??? ???? ?? ??? ?? ??? ????. ??? ?? ?? ? ?? ?? ??? ??? ? ???? ?? ?? ???? Puck? ?????.

???? ?? ? ???? ??? ???? ???? ????

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main
         >



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

???! ?? ??? ???? ???? ?? ??? ??? ?????.

?? ??

?? ????? CSS ??? ?? ??? ???? ??? ??? ???? ? ??? ?????. ??? ? ??? ?? ?????? ??? ??? ?? ???? ???? ??? ???? ?? ?????? ????? ?????.

??

CSS ???? ?? ??? ????? ?? ??? ??? ?? ??? ?? ???? ?? ??? ???? ???? ???. ?? Puck? ?? ?? ??? ?? ?? ??? ?? ??? ?? ?? ?? ??? ?? ????. ??? ?? var CSS ??? ???? ??? ???? ??? ???? ???? ????.

? ??????? ???? ??? ??? ??? ? ???? ??? ??? ?? ??? ??? ??? ? ??? Puck? ?? ?? ??? ???? ? ??? ? ????.

1??: ?? ??

?? CSS ?? ??? ?? ????? ??? ???? ??? ?????. ??? ?? ???? ???? CSS? ?? ??? ?? ???? ???? ??? ??? ?? ? ????.

??? ?: TypeScript? ???? ?? ?? ?? ???? ???? ?? ???? ??? ? ????

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

2??: ?? ?? ??? ?? ??

???? ?? ??? ?? ??? ??? ????? ?? ??? ???????. ?? ?? ???? ???? ?? ?? ??? ?? ??? ?? ??? ????? ? ????.

??? ??? ? ?? ??? ?? ??? ?? ???? ???? ???.

npm i @measured/puck --save

? ? ??? ??? ???? props? ??? ?? ??? ?? ?? ??? CSS ??? ?????.

// Puck ?? ??
const ?? = {
  ????: {
    //... ?? ????
  },
  ??: {
    //... ?? ?? ??

    ???: ({ children,fontColor,headingFontSize,paragraphFontSize}) => {
      ?? (
        <??
         >



<p>?? ???? ???? ? ??? ?? ??? ? ??? ?????. ?? ??? ???? ??? ??? ??? ???? ???? ??? ??? ??? ??? ???? ?? ? ? ????.</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg"  class="lazy" alt="Using CSS variables to create dynamic themes in Puck" /></p><h3>
  
  
  3??: ?? ????? ?? ??? ???
</h3>

<p>????? ???? var CSS ??? ???? ??? ????? ?? ??? ??????.</p>

<p>? ???? ?? ?? ? ?? ??? ?????.<br>
</p>

<pre class="brush:php;toolbar:false">const headerConfig = {
  //... ?? ?? ??

  ???: ({ ?? }) => {
    ?? (
      <div>
        <h1>



</h1><p>???? ???? ?? ??? ??? ??? ?? ?? ?? ???? ??? ???? ?? ??? ??? ?? ?? ??? ???? ?????? ?? ??? ? ????.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>? ??? ?? ??! ?? ???? ???? ??? ?? ??? ???? ???? ??? ??? ? ????.</p>

<h3>
  
  
  CSS ?? ??? ???
</h3>

<p>? ??:</p>

• ???? ???? ??
• ??? ?? ??? ??? ?? ? ??? ??? ???? ?? ?? ???? ?? ???? ?? ?? ??? ?? ??? ? ????.
• ?? ???? ?? ??? ?????. CSS ??? ?? ??? ?????? ????? ?????
• ?? ??? ?? ??? ? ?? ?? ???? ????

???:

• ??? ?????? ???? ??? ???? ??? ??? ? ????
• ?? ??? CSS ?? ???? ???? ???? ??? ? ????

? ???

?? ?? ??? ?? ??? ??? ?? ???? ? ?? ??? ??? ????.

• ?? ??? ?? ?? - ?? ????????? ???, ?? ?? ??? ?? ?? ?? ??? ???? ? ?? ????. ?? ?? ?? ?? ??? ??? ?? ??? ??? ? ????. ??? ??? ?? CSS ??? ??? ??? ???? ? ???? ???? ?? ??? ?? ?? ?? ???? ??? ?? ?? ?? ??? ? ????.
• ???? ????? ?? – ??? ???? ?? ??? ?????? ???? ?? ??? ???? ???? ??? ????? ???? ??? ?? ? ?? ? ????. Tailwind ?? Emotion? ?? ?????? Puck? ?? ???? ??? ??? ????? ???? ???? ?????. ??? Puck? ?? ????? ????? Emotion ????? ?????!
• ???? ?? ?? ??? ?? – ??? ???? ??? ??? ?????? ???? ?? ????? ?????? ? ?? ????. CSS ??? ???? ???? ?? ?? ???? ?? ?? ?? ??? ????? ?? ??? ? ????. ?? ??, ???? ?? ?? h1 ??? ?? CSS ??? ????? ????? ??? ?? ?? ??? Heading ?? ?? ?? ??? ? ????.

??? ???? ?? ?????????

? ????? ?? Puck ?? ??? ??? ?? ??? CSS ??? ??? ? ??? ????. ?? ?? ??? ????? Puck ??? ??? ???, ???? ????? ???? ?? ?? ?? ????!

??? ? ??? ??? ??? ? ????? ?? ???? ??? ? ?? ??? ? ??? ??? ???? ???? ???? ??? ??? ???? ???? ?? Puck? ??? ?? ????? ?? ??? ??? ????.

Puck? ??? ???? ?? ??? ?? ?? ??? ?? ??? ?? ???? ?????.

• ? GitHub? ??? ???? ????? ???? ?? ???? ????? ???? ????? ??? ???.
• ? Discord ????? ???? ????? ????, ????, ?????.
• ? ?? ????, ????, ?? ????? ??? X ? Bluesky?? ??????.
• ? ??? ????? ? ?? ? ???? ? ?? ?? ??? ???? ??? ?? ??? ??? ?????.

? ??? CSS ??? ???? Puck?? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!