CASL render child component if 'cannot'

Question

How do I display a child component with @casl/react if a user 'cannot' do something?

I'm asking this question because I still want to render a component if the user isn't authorized, but in a disabled state.

Example:

What I want to do:

<Cannot do="update" on="style">
    <button disabled={true}> Update </button>
</Cannot>

Answer 1

Forgot I can just check the abilities

<button disabled={!abilities.can('update', 'style')}> Update </button>

Answer 2

<Can> supports not prop:

<Can not do="update" on="style">...</Can>

https://github.com/stalniy/casl/blob/master/packages/casl-react/README.md#3-property-names-and-aliases