• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

104
Views
Cómo agregar texto al interruptor de interfaz de usuario de material

Tengo problemas para personalizar el botón de cambio de interfaz de usuario del material. ¿Hay algún genio de css que sepa cómo obtener este aspecto específico? Así es como quiero que se vea y cuando se alterna, debería verse así, pero así es como se ve ahora con este código,

 import clsx from 'clsx'; import { styled } from '@mui/system'; import { useSwitch, UseSwitchProps } from '@mui/base/SwitchUnstyled'; const blue = { 500: '#007FFF', }; const grey = { 400: '#BFC7CF', 500: '#AAB4BE', }; const BasicSwitchRoot = styled('span')` font-size: 0; position: relative; display: inline-block; width: 160px; height: 40px; margin: 10px; background: ${grey[400]}; border-radius: 10px; cursor: pointer; &.Switch-disabled { opacity: 0.4; cursor: not-allowed; } &.Switch-checked { background: ${grey[500]}; } `; const BasicSwitchInput = styled('input')` cursor: inherit; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: 1; margin: 0; `; const BasicSwitchThumb = styled('span')` display: block; width: 80px; height: 40px; top: 0px; left: 0px; border-radius: 10px; background-color: #092c4c; position: relative; transition: all 300ms ease; &.Switch-focusVisible { background-color: ${grey[400]}; box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25); } &.Switch-checked { left: 80px; top: 0px; background-color: #092c4c; } `; function BasicSwitch(props: UseSwitchProps) { const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); const stateClasses = { 'Switch-checked': checked, 'Switch-disabled': disabled, 'Switch-focusVisible': focusVisible, }; return ( <BasicSwitchRoot className={clsx(stateClasses)}> <BasicSwitchThumb className={clsx(stateClasses)} /> <BasicSwitchInput {...getInputProps()} aria-label='Demo switch' /> </BasicSwitchRoot> ); } export const ToggleViewButton = () => { return ( <div> <BasicSwitch /> </div> ); };

Me gustaría que el objetivo final fuera algo como esto https://codepen.io/nikkk-me/pen/abvPjeG pero con mis colores, menos redondeados y usando material ui en lugar de crear mi propio componente.

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error