[Reactjs] Material UI (useStyles / makeStyles) and Styled Components, access style attributes of elements (Codesandbox link included)

App.ts

import React from "react";
import StyledComponentsRadios from "./StyledComponentsRadios";
import MuiRadios from "./MuiRadios";

const radioButtons = 5;

export default function App() {
  return (
    <>
      <StyledComponentsRadios radioButtons={radioButtons} />
      <MuiRadios radioButtons={radioButtons} />
    </>
  );
}

//////////////////////////////////////////////////////////////////////////
// https://codesandbox.io/s/stoic-brahmagupta-vms45?file=/src/App.js:0-322
//////////////////////////////////////////////////////////////////////////

MuiRadios.ts

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

const useContainerClasses = makeStyles((theme) => ({
  root: {
    margin: 0,
    padding: 0
  }
}));

const useRadioClasses = makeStyles((theme) => ({
  input: {
    marginRight: "calc(var(--i) * 2rem)" // <-- accessing attribute here
  }
}));

type TMuiRadios = {
  radioButtons: number
}
export default function MuiRadios({ radioButtons }: TMuiRadios) {
  const radioClasses = useRadioClasses();
  const containerClasses = useContainerClasses();

  return (
    <Container classes={containerClasses}>
      {Array.from({ length: radioButtons }).map((_, index) => (
        <input
          type="radio"
          className={radioClasses.input}
          style={{ ["--i" as string]: index }} // <-- setting attribute here
        />
      ))}
    </Container>
  );
}

StyledComponentsRadios.ts

import React from "react";
import styled from "styled-components";

type StyledComponentsRadios = {
  radioButtons: number;
}
export default function StyledComponentsRadios({ radioButtons }: TStyledComponentsRadios) {
  return (
    <Container>
      {Array.from({ length: radioButtons }).map((button, index) => (
        <RadioButton type="radio" style={{ ["--i" as string]: index }} /> // <-- setting attribute here
      ))}
    </Container>
  );
}

const Container = styled.div``;

const RadioButton = styled.input`
  margin-right: calc(var(--i) * 2rem); // <-- accessing attribute here
`;