Радио | Есть ли способ выровнять значок по горизонтали, используя только реквизит, без стилей?

Есть ли способ выровнять значок по горизонтали, используя только реквизит, без стилей?

Код - https://codesandbox.io/s/smoosh-hill-nr230p?file=/src/App.js:113-349

Ну вот:

export default function App() {
    return (
        <div className = "App">
            <Radio
                label = "I cannot be unchecked"
                // How to align horizontally?
                icon = {() => <IconAdjustments size = {18} color='red'/>}
            />
        </div>
    );
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Свойство icon используется для изменения значка самой кнопки Radio. Если вы хотите добавить значок на метку, вы должны использовать:

<Radio
    label = {
        <>
            <IconAdjustments size = {14} color = "red" />
            I cannot be unchecked
        </>
    }  
/>

Редактировать:

Пока еще не ясно, чего вы все-таки хотите добиться, так что вот все возможные сценарии.

  1. Если вы хотите значок в метке => решение выше.
  2. Если вы хотите изменить значок в самом переключателе:
  • Вы либо предоставляете сам элемент значка => icon = {IconAdjustments}, либо..
  • Вы предоставляете компонент реакции, который принимает className как свойство и применяет его к возвращаемому элементу:
icon = {({ className }) => (
    <IconAdjustments className = {className} color = "red" />
)}

Передача size элементу значка таблицы не будет работать для вас, поскольку размер рассчитывается внутренне на основе size кнопки Radio, а фиксированные width и height применяются к значку.

Да, это способ, спасибо. По правде говоря, у меня был этот вариант. Хочется использовать иконку проп

HackerMF 03.11.2022 13:00

@HackerMF Я не понимаю. Что вы пытаетесь сделать в конце концов?

zhulien 03.11.2022 14:44

Просто поймите, что есть шанс использовать значок реквизита для этого случая —

HackerMF 03.11.2022 17:50

Нет, шансов нет. Как я уже говорил, свойство icon используется для изменения точки внутри кнопки Radio.

zhulien 03.11.2022 18:04

Нет, это не для этого. Посмотрите на мои коды и ящик. В радио все еще есть точка

HackerMF 04.11.2022 09:42

@HackerMF Потому что вы даже не используете его должным образом. Вы должны передать элемент SVG, а не функцию. Должно быть: icon = {IconAdjustments}. Кроме того, это четко указано в документах: mantine.dev/core/radio/?t=props

zhulien 05.11.2022 09:18

Попробуйте использовать его правильно, как вы думаете. Увидишь, что ты получишь. Да, в документации ясно сказано, FC<Pick<SVGProps<SVGSVGElement>

HackerMF 07.11.2022 20:50

@HackerMF Дело не в том, что я думаю, а в том, что ЭТО ЕСТЬ. Я рассказываю вам, как это работает и как это должно использоваться, и я привожу вам конкретный пример того, как добиться того, чего вы хотите. Вы просто невежественны и не хотите смотреть правде в глаза. Удачи.

zhulien 08.11.2022 11:57

FC<Pick<SVGProps<SVGSVGElement> Я думаю, вы не понимаете, что это значит, поэтому вы думаете, что это то, что ЭТО ЕСТЬ. Красивый. Попробуйте использовать свой пример, используя мои коды и ящик, и я надеюсь, что вы что-то поймете

HackerMF 08.11.2022 16:56

@HackerMF Есть разница между функцией и реагирующим компонентом, чувак. Вместо того, чтобы быть токсичным высокомерием, цените помощь, которую вы получаете. Я внесу правки в пост, чтобы вы могли лучше понять проблему.

zhulien 08.11.2022 19:42

это не токсичное высокомерие. Я только что попробовал, как вы сказали раньше, и не было никаких изменений, затем я попытался добавить только svg и ничего, поэтому я подумал, что вы не пробовали, но посоветовали. Теперь я проверил это, затем я нажимаю радио и заметил, что значок был внутри радио. Извиняюсь, мой плохой

HackerMF 09.11.2022 17:11

Другие вопросы по теме