css box-shadow not showing-CodePudding

I am facing an issue with css box-shadow.. At the company we use material ui and react base table from our own story book.

My problem is that I am currently replacing react virtualized table with react base table.

I had the following box-shadow styling on the header row that was working:

 .ReactVirtualized__Table {
        .ReactVirtualized__Table__headerRow {
            background-color: #ffffff;
            box-shadow: 0 3px 3px -2px rgba(36, 36, 36, 0.12), 0 3px 4px 0 rgba(36, 36, 36, 0.14),
                0 1px 8px 0 rgba(36, 36, 36, 0.2);
   }
}

After implementing react base table I added it the following way (side note, we use jss styling):

 root: {
    '& .BaseTable__header': {
      boxShadow:
        '0 3px 3px -2px rgba(36, 36, 36, 0.12), 0 3px 4px 0 rgba(36, 36, 36, 0.14), 0 1px 8px 0 rgba(36, 36, 36, 0.2)',
      fontWeight: 'normal',
      position: 'relative',
    },
}

tried differently too:

 boxShadow: [
        [0, 3, 3, -2, 'rgba(36, 36, 36, 0.12)'],
        [0, 3, 4, 0, 'rgba(36, 36, 36, 0.14)'],
        [0, 1, 8, 0, 'rgba(36, 36, 36, 0.2)'],
      ],

The shadow appears below the header row, but not above... I cannot figure out what could be the issue.

CodePudding user response：

Okay. I don't know why it was working with react virtualized by default, but here I had to push the header row a little down with a margin top and it appeared..

CodePudding user response：

Syntax of box-shadow is

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color ;

So if you want to appears box-shadow above:

set the `offset-x`` value with (-)(minus)

Example:

box-shadow: -2px 2px 2px 1px rgba(0, 0, 0, 0.2);