list view web part with custom view formatting

Question

I customized a list view that, contains the followings:

  {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
    }

The view renders fine when I look at the list, but I miss some styling when showing the list in a list web part on a modern site. Like the background color, defined in the ms-bgColor-themeLighterAlt class is ignored. If I add "background-color": "#edffed" to style, the background is correctly colored. Is this a known limitation or is there some way to create a view using the theme classes and that works in the list web part too?

Edit: Here's my complete json based on the answer of LZ_MSFT but still not working. If I remove the class from attributes, then the coloring disappears completely.

{
    "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "additionalRowClass": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover",
      "hideSelection": "true",
    "hideColumnHeader": "true",
    "rowFormatter": {

      "elmType": "a",
      "attributes": {
        "href": "[$link]",
        "target": "=if([$NewTab] == true, '_blank', '')"
      },
      "style": {
        "float": "left"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "min-width": "180px",
            "min-height": "50px",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title "
                  },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "iconName": "[$Icon]",
                    "class": "ms-fontSize-su"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }

View in list:

View in web part:

I also don't get, why the boxes are not aligned, but that is the same on both places, so probably something in the row formatting.

Answer 1

I can reproduce this issue in my test environment.

When I check the code in modern site page using IE F12 developer tools. All the class added, unfortunately, we can not see all the class definition in this page. So, the class not works.

In currently, we have to add some styles in "style" property in JSON code to achieve it.

Here is a thread with similar issue for your reference.

Column Formatting in List View Web Part