Sanity listItem serializer not applying className to bullet lists

I can spot the issue! In @sanity/block-content-to-react, you're using the wrong serializer key. You're defining listItem when you should be using list instead.

The listItem serializer handles individual <li> elements, but the list serializer handles the wrapping <ul> and <ol> elements. Here's the corrected version:

list: props => {
  switch (props.type) {
    case "bullet": {
      return <ul className="liststyle">{props.children}</ul>
    }
    case "number": {
      return <ol>{props.children}</ol>
    }
    default: {
      return <ul>{props.children}</ul>
    }
  }
},
listItem: props => <li>{props.children}</li>

Notice two key changes:

1. Changed listItem to list for the wrapper elements
2. Changed props.node.listItem to props.type - the list type is accessed via props.type, not props.node.listItem

The list serializer receives props.type which will be either "bullet" or "number", and props.children which contains all the rendered list items. The listItem serializer then handles how each individual <li> is rendered.

Side note: The @sanity/block-content-to-react package is deprecated. For new projects, you should use @portabletext/react instead, where the API is slightly different (uses components instead of serializers and value instead of node).