Блог

Главная - Вопросы по программированию - Как настроить тип ввода = радиоэлементы в CSS, используя Material UI внутри компонента?

Как настроить тип ввода = радиоэлементы в CSS, используя Material UI внутри компонента?

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

В CSS я бы использовал input[type="radio"]:checked { color: #000} , но в Material UI это выражение недопустимо.

В Material UI я создаю правила, используя makeStyles:

const useStyles = makeStyles(() => ({ text: { color: "red", }, }));

Как я могу настроить таргетинг input[type="radio"] на элементы, используя makeStyles?

Ответ №1:

Вы можете использовать "amp;:checked" для таргетинга отмеченные переключатели. Это предполагает, что вы используете собственный input компонент DOM. Если вы используете MUI <Radio/> , вы можете настроить таргетинг на отмеченное имя правила

 const useStyles = makeStyles({
  customRadio: {
    "amp;   label" : {
      color: "green"
    },
    "amp;:checked   label" : {
      color: "red"
    }
  }
})

function App() {

  const classes = useStyles();

  return (
    <div>
      <div>
        <input className={classes.customRadio} type="radio" id="foo" name="test" value="foo" defaultChecked={true} />
        <label htmlFor="foo">foo</label>
      </div>
      <div>
        <input className={classes.customRadio} type="radio" id="bar" name="test" value="bar" />
        <label htmlFor="bar">bar</label>
      </div>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));  
 <body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { makeStyles } = MaterialUI;
  </script>
</body>

Ответ №2:

Вы пробовали что-то подобное?

 const useStyles = makeStyles(() => ({ text: { color: "red", }, 'input[type="radio"]:checked': { color: '#000' } }));