title: Change maxWidth only for xxl screens react-table
body: <p>I am using react-table. In this table I have a column. In that column header and column cell I need to change my maxWidth style property to be 60 for xs to xl and 30 for xxl. Is there a way to do this inline? I would like to only make changes inside this headerProps and cellProps style object rather than creating a seperate file and linking the component to it. Im not the best at scss this project is using scss.</p>
  <p>Here is my accessor that has the cellProps and headerProps</p>
  <pre><code>  const columns = [
      
      {
          accessor: 'firstName',
          Header: 'First Name',
          Cell: firstNameFormatter
      },
      {
          accessor: 'lastName',
          Header: 'Last Name',
          Cell: lastNameFormatter
      },
      {
          accessor: 'actions',
          Header: &lt;FontAwesomeIcon icon=&quot;cog&quot; className=&quot;fs-1 ml-2&quot; /&gt;,
          headerProps: {
              className: 'bg-light',
              style: {
                  maxWidth: 60 &lt;--- make this maxWidth 30 only for xxl screens
              }
          },
          Cell: actionFormatter,
          sticky: 'right',
          cellProps: {
              className: 'bg-light',
              style: {
              maxWidth: 60 &lt;---- make this maxWidth 30 only for xxl screens
              }
          },
      }
    ];
  
  </code></pre>