Changing one of the selectors to x, changes all the others to x.

See picture.

If i change eg colorClassName to a specific value, all my other selectors change to that value as well, I dont want this to happen.

Code:

import { Block } from "payload/types";

import { backgroundColor } from "../fields/backgroundColor";

export const PillBlock: Block = {

slug: "PillBlock",

labels: {

singular: "Pill",

plural: "Pills",

},

fields: [

{ name: "title", type: "text", required: true },

backgroundColor({ overrides: { label: "colorClassName ", required: true } }),

backgroundColor({ overrides: { label: "colorDarkClassName", required: true } }),

backgroundColor({ overrides: { label: "textColorClassName ", required: true } }),

backgroundColor({

overrides: {

label: "textColorDarkClassName",

required: true,

hooks: {

afterChange: [

args => {

args.value = "dark:text-" + args.value;

},

],

},

},

}),

],

};

import { Field, SelectField } from "payload/types";

import deepMerge from "../utilities/deepMerge";

interface Args {

overrides?: Partial<SelectField>;

}

const options = [

{ label: "Main Primary Dark", value: "main-primary-dark" },

....

];

export const backgroundColor = ({ overrides = {} }: Args): Field =>

deepMerge(

{

name: "backgroundColor",

type: "select",

options: options,

},

overrides

);