Блог

Я использую @mui/material и сторонний компонент, который имеет два свойства: className и wrapperClassName . Настройка className реквизита тривиальна.

 import styled from '@mui/material'; import { Checkbox as _Checkbox } from 'my-checkbox-component';  const Checkbox = styled(_Checkbox)`  // my styles here `;  

Я хочу знать, как создать стиль для wrapperClassName . Я пробовал использовать css его для создания.

 // @jsx import styled from '@mui/material'; import { css } from '@emotion/react'; import { Checkbox as _Checkbox } from 'my-checkbox-component';  const Checkbox = styled(props =gt; {  const wrapperClassName = css`  // my wrapper styles here  `.name;   return lt;_Checkbox {...props} wrapperClassName={wrapperClassName} /gt;; })`  // my styles here `;  

Это возвращает имя, но не добавляет lt;stylegt; элемент, содержащий правило.

Я мог бы сделать что-нибудь уродливое, например:

 import styled from '@mui/material'; import { Checkbox as _Checkbox } from 'my-checkbox-component';  const Checkbox = styled(({ className: wrapperClass, ...props }) =gt; {  const InnerCheckbox = styled(_Checkbox)`  // my styles here  `;   return lt;InnerCheckbox {...props} wrapperClassName={wrapperClass} /gt;; })`  // my wrapper styles here `;  

Это просто кажется очень неприятным.

Я тоже пробовал использовать lt;style jsxgt;{`/* my styles */`}lt;/stylegt; , но машинописный текст мне это не понравилось.