Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Style Props

Style propsは、コンポーネントにpropsを渡すだけでコンポーネントのスタイルを変更する方法です。また、多くの便利なショートハンドを提供しており、開発効率を向上させています。

編集可能な例

<Box w="full" p="md" bg="warning" color="white">
  This is Box
</Box>
Copied!
PropCSSプロパティテーマのトークン
accentColor, accentaccent-colorcolors
alignContentalign-contentnone
alignItemsalign-itemsnone
alignSelfalign-selfnone
alignmentBaselinealignment-baselinenone
allallnone
animationanimationanimations
animationCompositionanimation-compositionnone
animationDelayanimation-delaynone
animationDirectionanimation-directionnone
animationDurationanimation-durationtransitions.duration
animationFillModeanimation-fill-modenone
animationIterationCountanimation-iteration-countnone
animationNameanimation-namenone
animationPlayStateanimation-play-statenone
animationRangeanimation-rangenone
animationRangeEndanimation-range-endnone
animationRangeStartanimation-range-startnone
animationTimelineanimation-timelinenone
animationTimingFunctionanimation-timing-functiontransitions.easing
appearanceappearancenone
aspectRatioaspect-rationone
azimuthazimuthnone
backdropBlur-ui-backdrop-blurblurs
backdropBrightness-ui-backdrop-brightnessnone
backdropContrast-ui-backdrop-contrastnone
backdropDropShadow-ui-backdrop-drop-shadowshadows
backdropFilterbackdrop-filternone
backdropGrayscale-ui-backdrop-grayscalenone
backdropHueRotate-ui-backdrop-hue-rotatenone
backdropInvert-ui-backdrop-invertnone
backdropSaturate-ui-backdrop-saturatenone
backdropSepia-ui-backdrop-sepianone
backfaceVisibilitybackface-visibilitysizes
background, bgbackgroundcolors
backgroundAttachment, bgAttachmentbackground-attachmentnone
backgroundBlendMode, bgBlendModebackground-blend-modenone
backgroundClip, bgClipbackground-clipnone
backgroundColor, bgColorbackground-colorcolors
backgroundImage, bgGradient, bgImage, bgImgbackground-imagegradients
backgroundOrigin, bgOriginbackground-originnone
backgroundPosition, bgPositionbackground-positionnone
backgroundPositionX, bgPositionX, bgPosXbackground-position-xnone
backgroundPositionY, bgPositionY, bgPosYbackground-position-ynone
backgroundRepeat, bgRepeatbackground-repeatnone
backgroundSize, bgSizebackground-sizenone
baselineShiftbaseline-shiftnone
blockSizeblock-sizesizes
blur-ui-blurblurs
borderborderborders
borderBlockborder-blockborders
borderBlockColorborder-block-colorcolors
borderBlockEndborder-block-endborders
borderBlockEndColorborder-block-end-colorcolors
borderBlockEndStyleborder-block-end-stylenone
borderBlockEndWidthborder-block-end-widthnone
borderBlockStartborder-block-startborders
borderBlockStartColorborder-block-start-colorcolors
borderBlockStartStyleborder-block-start-stylenone
borderBlockStartWidthborder-block-start-widthnone
borderBlockStyleborder-block-stylenone
borderBlockWidthborder-block-widthnone
borderBottomborder-bottomborders
borderBottomColorborder-bottom-colorcolors
borderBottomLeftRadius, roundedBottomLeftborder-bottom-left-radiusradii
borderBottomRadius, roundedBottomborder-bottom-left-radius
border-bottom-right-radius
radii
borderBottomRightRadius, roundedBottomRightborder-bottom-right-radiusradii
borderBottomStyleborder-bottom-stylenone
borderBottomWidthborder-bottom-widthnone
borderCollapseborder-collapsenone
borderColorborder-colorcolors
borderEndEndRadius, borderBottomEndRadius, roundedBottomEndborder-end-end-radiusradii
borderEndStartRadius, borderBottomStartRadius, roundedBottomStartborder-end-start-radiusradii
borderImageborder-imageborders
borderImageOutsetborder-image-outsetnone
borderImageRepeatborder-image-repeatnone
borderImageSliceborder-image-slicenone
borderImageSourceborder-image-sourcegradients
borderImageWidthborder-image-widthnone
borderInlineborder-inlineborders
borderInlineColorborder-inline-colorcolors
borderInlineEnd, borderEndborder-inline-endborders
borderInlineEndColor, borderEndColorborder-inline-end-colorcolors
borderInlineEndRadius, borderEndRadius, roundedEndborder-end-start-radius
border-end-end-radius
radii
borderInlineEndStyle, borderEndStyleborder-inline-end-stylenone
borderInlineEndWidth, borderEndWidthborder-inline-end-widthnone
borderInlineStart, borderStartborder-inline-startborders
borderInlineStartColor, borderStartColorborder-inline-start-colorcolors
borderInlineStartRadius, borderStartRadius, roundedStartborder-start-start-radius
border-start-end-radius
radii
borderInlineStartStyle, borderStartStyleborder-inline-start-stylenone
borderInlineStartWidth, borderStartWidthborder-inline-start-widthnone
borderInlineStyleborder-inline-stylenone
borderInlineWidthborder-inline-widthnone
borderLeftborder-leftborders
borderLeftColorborder-left-colorcolors
borderLeftRadius, roundedLeftborder-top-left-radius
border-bottom-left-radius
radii
borderLeftStyleborder-left-stylenone
borderLeftWidthborder-left-widthnone
borderRadius, roundedborder-radiusradii
borderRightborder-rightborders
borderRightColorborder-right-colorcolors
borderRightRadius, roundedRightborder-top-right-radius
border-bottom-right-radius
radii
borderRightStyleborder-right-stylenone
borderRightWidthborder-right-widthnone
borderSpacingborder-spacingnone
borderStartEndRadius, borderTopEndRadius, roundedTopEndborder-start-end-radiusradii
borderStartStartRadius, borderTopStartRadius, roundedTopStartborder-start-start-radiusradii
borderStyleborder-stylenone
borderTopborder-topborders
borderTopColorborder-top-colorcolors
borderTopLeftRadius, roundedTopLeftborder-top-left-radiusradii
borderTopRadius, roundedTopborder-top-left-radius
border-top-right-radius
radii
borderTopRightRadius, roundedTopRightborder-top-right-radiusradii
borderTopStyleborder-top-stylenone
borderTopWidthborder-top-widthnone
borderWidthborder-widthnone
borderXborder-left
border-right
borders
borderYborder-top
border-bottom
borders
bottombottomspaces
boxAlignbox-alignnone
boxDecorationBreakbox-decoration-breaknone
boxDirectionbox-directionnone
boxFlexbox-flexnone
boxFlexGroupbox-flex-groupnone
boxLinesbox-linesnone
boxOrdinalGroupbox-ordinal-groupnone
boxOrientbox-orientnone
boxPackbox-packnone
boxShadow, shadowbox-shadowshadows
boxSizewidth
height
sizes
boxSizingbox-sizingnone
breakAfterbreak-afternone
breakBeforebreak-beforenone
breakInsidebreak-insidenone
brightness-ui-brightnessnone
captionSidecaption-sidenone
caretColor, caretcaret-colorcolors
clearclearnone
clipclipnone
clipPathclip-pathnone
clipRuleclip-rulenone
color, textColorcolorcolors
colorInterpolationcolor-interpolationnone
colorModecolor-schemenone
columnCountcolumn-countnone
columnFillcolumn-fillnone
columnGap, gapX, gxcolumn-gapspaces
columnRulecolumn-rulenone
columnRuleColorcolumn-rule-colorcolors
columnRuleStylecolumn-rule-stylenone
columnRuleWidthcolumn-rule-widthnone
columnSpancolumn-spannone
columnWidthcolumn-widthsizes
columnscolumnsnone
containcontainnone
containIntrinsicBlockSizecontain-intrinsic-block-sizenone
containIntrinsicHeightcontain-intrinsic-heightnone
containIntrinsicInlineSizecontain-intrinsic-inline-sizenone
containIntrinsicSizecontain-intrinsic-sizenone
containIntrinsicWidthcontain-intrinsic-widthsizes
containercontainernone
containerNamecontainer-namenone
containerTypecontainer-typenone
contentcontentnone
contentVisibilitycontent-visibilitynone
contrast-ui-contrastnone
counterIncrementcounter-incrementnone
counterResetcounter-resetnone
counterSetcounter-setnone
cursorcursornone
directiondirectionnone
displaydisplaynone
dominantBaselinedominant-baselinenone
dropShadow-ui-drop-shadowshadows
emptyCellsempty-cellsnone
fillfillcolors
fillOpacityfill-opacitynone
fillRulefill-rulenone
filterfilternone
flexflexnone
flexBasisflex-basissizes
flexDirection, flexDirflex-directionnone
flexFlowflex-flownone
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexWrapflex-wrapnone
floatfloatnone
floodColorflood-colorcolors
floodOpacityflood-opacitynone
fontfontnone
fontFamilyfont-familyfonts
fontFeatureSettingsfont-feature-settingsnone
fontKerningfont-kerningnone
fontLanguageOverridefont-language-overridenone
fontOpticalSizingfont-optical-sizingnone
fontPalettefont-palettenone
fontSize, textfont-sizefontSizes
fontSizeAdjustfont-size-adjustnone
fontSmoothfont-smoothnone
fontStretchfont-stretchnone
fontStylefont-stylenone
fontSynthesisfont-synthesisnone
fontSynthesisPositionfont-synthesis-positionnone
fontSynthesisSmallCapsfont-synthesis-small-capsnone
fontSynthesisStylefont-synthesis-stylenone
fontSynthesisWeightfont-synthesis-weightnone
fontVariantfont-variantnone
fontVariantAlternatesfont-variant-alternatesnone
fontVariantCapsfont-variant-capsnone
fontVariantEastAsianfont-variant-east-asiannone
fontVariantEmojifont-variant-emojinone
fontVariantLigaturesfont-variant-ligaturesnone
fontVariantNumericfont-variant-numericnone
fontVariantPositionfont-variant-positionnone
fontVariationSettingsfont-variation-settingsnone
fontWeightfont-weightfontWeights
forcedColorAdjustforced-color-adjustnone
gap, ggapspaces
glyphOrientationVerticalglyph-orientation-verticalnone
grayscale-ui-grayscalenone
gridgridnone
gridAreagrid-areanone
gridAutoColumnsgrid-auto-columnssizes
gridAutoFlowgrid-auto-flownone
gridAutoRowsgrid-auto-rowssizes
gridColumngrid-columnnone
gridColumnEndgrid-column-endnone
gridColumnStartgrid-column-startnone
gridRowgrid-rownone
gridRowEndgrid-row-endnone
gridRowStartgrid-row-startnone
gridTemplategrid-templatenone
gridTemplateAreasgrid-template-areasnone
gridTemplateColumnsgrid-template-columnssizes
gridTemplateRowsgrid-template-rowssizes
hangingPunctuationhanging-punctuationnone
height, hheightsizes
hueRotate-ui-hue-rotatenone
hyphenateCharacterhyphenate-characternone
hyphenateLimitCharshyphenate-limit-charsnone
hyphenshyphensnone
imageOrientationimage-orientationnone
imageRenderingimage-renderingnone
imageResolutionimage-resolutionnone
initialLetterinitial-letternone
inlineSizeinline-sizesizes
insetinsetspaces
insetBlockinset-blockspaces
insetBlockEndinset-block-endspaces
insetBlockStartinset-block-startspaces
insetInlineinset-inlinespaces
insetInlineEnd, insetEndinset-inline-endspaces
insetInlineStart, insetStartinset-inline-startspaces
insetXleft
right
spaces
insetYtop
bottom
spaces
invert-ui-invertnone
isolationisolationnone
justifyContentjustify-contentnone
justifyItemsjustify-itemsnone
justifySelfjustify-selfnone
leftleftspaces
letterSpacing, trackingletter-spacingletterSpacings
lightingColorlighting-colorcolors
lineBreakline-breaknone
lineHeight, leadingline-heightlineHeights
lineHeightStepline-height-stepnone
listStylelist-stylenone
listStyleImage, listStyleImglist-style-imagegradients
listStylePosition, listStylePoslist-style-positionnone
listStyleTypelist-style-typenone
margin, mmarginspaces
marginBlockmargin-blockspaces
marginBlockEndmargin-block-endspaces
marginBlockStartmargin-block-startspaces
marginBottom, mbmargin-bottomspaces
marginInlinemargin-inlinespaces
marginInlineEnd, marginEnd, memargin-inline-endspaces
marginInlineStart, marginStart, msmargin-inline-startspaces
marginLeft, mlmargin-leftspaces
marginRight, mrmargin-rightspaces
marginTop, mtmargin-topspaces
marginTrimmargin-trimnone
marginX, mxmargin-inline-start
margin-inline-end
spaces
marginY, mymargin-top
margin-bottom
spaces
markermarkernone
markerEndmarker-endnone
markerMidmarker-midnone
markerStartmarker-startnone
maskmasknone
maskBordermask-bordernone
maskBorderModemask-border-modenone
maskBorderOutsetmask-border-outsetnone
maskBorderRepeatmask-border-repeatnone
maskBorderSlicemask-border-slicenone
maskBorderSourcemask-border-sourcenone
maskBorderWidthmask-border-widthnone
maskClipmask-clipnone
maskCompositemask-compositenone
maskImagemask-imagegradients
maskModemask-modenone
maskOriginmask-originnone
maskPositionmask-positionnone
maskRepeatmask-repeatnone
maskSizemask-sizenone
maskTypemask-typenone
masonryAutoFlowmasonry-auto-flownone
mathDepthmath-depthnone
mathShiftmath-shiftnone
mathStylemath-stylenone
maxBlockSizemax-block-sizesizes
maxBoxSizemax-width
max-height
sizes
maxHeight, maxHmax-heightsizes
maxInlineSizemax-inline-sizesizes
maxWidth, maxWmax-widthsizes
minBlockSizemin-block-sizesizes
minBoxSizemin-width
min-height
sizes
minHeight, minHmin-heightsizes
minInlineSizemin-inline-sizesizes
minWidth, minWmin-widthsizes
mixBlendMode, blendModemix-blend-modenone
objectFitobject-fitnone
objectPositionobject-positionnone
offsetoffsetnone
offsetAnchoroffset-anchornone
offsetDistanceoffset-distancenone
offsetPathoffset-pathnone
offsetPositionoffset-positionnone
offsetRotateoffset-rotatenone
opacityopacitynone
orderordernone
orphansorphansnone
outlineoutlinenone
outlineColoroutline-colorcolors
outlineOffsetoutline-offsetnone
outlineStyleoutline-stylenone
outlineWidthoutline-widthnone
overflowoverflownone
overflowAnchoroverflow-anchornone
overflowBlockoverflow-blocknone
overflowClipMarginoverflow-clip-marginnone
overflowInlineoverflow-inlinenone
overflowWrapoverflow-wrapnone
overflowXoverflow-xnone
overflowYoverflow-ynone
overlayoverlaynone
overscrollBehavior, overscrolloverscroll-behaviornone
overscrollBehaviorBlockoverscroll-behavior-blocknone
overscrollBehaviorInlineoverscroll-behavior-inlinenone
overscrollBehaviorX, overscrollXoverscroll-behavior-xnone
overscrollBehaviorY, overscrollYoverscroll-behavior-ynone
padding, ppaddingspaces
paddingBlockpadding-blockspaces
paddingBlockEndpadding-block-endspaces
paddingBlockStartpadding-block-startspaces
paddingBottom, pbpadding-bottomspaces
paddingInlinepadding-inlinespaces
paddingInlineEnd, paddingEnd, pepadding-inline-endspaces
paddingInlineStart, paddingStart, pspadding-inline-startspaces
paddingLeft, plpadding-leftspaces
paddingRight, prpadding-rightspaces
paddingTop, ptpadding-topspaces
paddingX, pxpadding-inline-start
padding-inline-end
spaces
paddingY, pypadding-top
padding-bottom
spaces
pagepagenone
pageBreakAfterpage-break-afternone
pageBreakBeforepage-break-beforenone
pageBreakInsidepage-break-insidenone
paintOrderpaint-ordernone
perspectiveperspectivenone
perspectiveOriginperspective-originnone
placeContentplace-contentnone
placeItemsplace-itemsnone
placeSelfplace-selfnone
pointerEventspointer-eventsnone
position, pospositionnone
printColorAdjustprint-color-adjustnone
quotesquotesnone
resizeresizenone
rightrightspaces
rotate-ui-rotatenone
rowGap, gapY, gyrow-gapspaces
rubyAlignruby-alignnone
rubyPositionruby-positionnone
saturate-ui-saturatenone
scale-ui-scale-x
-ui-scale-y
none
scaleX-ui-scale-xnone
scaleY-ui-scale-ynone
scrollBehaviorscroll-behaviornone
scrollMarginscroll-marginspaces
scrollMarginBlockscroll-margin-blocknone
scrollMarginBlockEndscroll-margin-block-endnone
scrollMarginBlockStartscroll-margin-block-startnone
scrollMarginBottomscroll-margin-bottomspaces
scrollMarginInlinescroll-margin-inlinenone
scrollMarginInlineEndscroll-margin-inline-endnone
scrollMarginInlineStartscroll-margin-inline-startnone
scrollMarginLeftscroll-margin-leftspaces
scrollMarginRightscroll-margin-rightspaces
scrollMarginTopscroll-margin-topspaces
scrollMarginXscroll-margin-left
scroll-margin-right
spaces
scrollMarginYscroll-margin-top
scroll-margin-bottom
spaces
scrollPaddingscroll-paddingspaces
scrollPaddingBlockscroll-padding-blocknone
scrollPaddingBlockEndscroll-padding-block-endnone
scrollPaddingBlockStartscroll-padding-block-startnone
scrollPaddingBottomscroll-padding-bottomspaces
scrollPaddingInlinescroll-padding-inlinenone
scrollPaddingInlineEndscroll-padding-inline-endnone
scrollPaddingInlineStartscroll-padding-inline-startnone
scrollPaddingLeftscroll-padding-leftspaces
scrollPaddingRightscroll-padding-rightspaces
scrollPaddingTopscroll-padding-topspaces
scrollPaddingXscroll-padding-left
scroll-padding-right
spaces
scrollPaddingYscroll-padding-top
scroll-padding-bottom
spaces
scrollSnapAlignscroll-snap-alignnone
scrollSnapStopscroll-snap-stopnone
scrollSnapTypescroll-snap-typenone
scrollTimelinescroll-timelinenone
scrollTimelineAxisscroll-timeline-axisnone
scrollTimelineNamescroll-timeline-namenone
scrollbarColorscrollbar-colorcolors
scrollbarGutterscrollbar-gutternone
scrollbarWidthscrollbar-widthnone
sepia-ui-sepianone
shapeImageThresholdshape-image-thresholdnone
shapeMarginshape-marginnone
shapeOutsideshape-outsidenone
shapeRenderingshape-renderingnone
skewX-ui-skew-xnone
skewY-ui-skew-ynone
stopColorstop-colornone
stopOpacitystop-opacitynone
strokestrokecolors
strokeDasharraystroke-dasharraynone
strokeDashoffsetstroke-dashoffsetnone
strokeLinecapstroke-linecapnone
strokeLinejoinstroke-linejoinnone
strokeMiterlimitstroke-miterlimitnone
strokeOpacitystroke-opacitynone
strokeWidthstroke-widthnone
tabSizetab-sizenone
tableLayouttable-layoutnone
textAligntext-alignnone
textAlignLasttext-align-lastnone
textAnchortext-anchornone
textCombineUprighttext-combine-uprightnone
textDecoration, textDecortext-decorationnone
textDecorationColortext-decoration-colorcolors
textDecorationLinetext-decoration-linenone
textDecorationSkiptext-decoration-skipnone
textDecorationSkipInktext-decoration-skip-inknone
textDecorationStyletext-decoration-stylenone
textDecorationThicknesstext-decoration-thicknessnone
textEmphasistext-emphasisnone
textEmphasisColortext-emphasis-colorcolors
textEmphasisPositiontext-emphasis-positionnone
textEmphasisStyletext-emphasis-stylenone
textIndenttext-indentnone
textJustifytext-justifynone
textOrientationtext-orientationnone
textOverflowtext-overflownone
textRenderingtext-renderingnone
textShadowtext-shadowshadows
textSizeAdjusttext-size-adjustnone
textTransformtext-transformnone
textUnderlineOffsettext-underline-offsetnone
textUnderlinePositiontext-underline-positionnone
textWraptext-wrapnone
timelineScopetimeline-scopenone
toptopspaces
touchActiontouch-actionnone
transformtransformnone
transformBoxtransform-boxnone
transformOrigintransform-originnone
transformStyletransform-stylenone
transitiontransitionnone
transitionBehaviortransition-behaviornone
transitionDelaytransition-delaynone
transitionDurationtransition-durationtransitions.duration
transitionPropertytransition-propertytransitions.property
transitionTimingFunctiontransition-timing-functiontransitions.easing
translatetranslatenone
translateX-ui-translate-xspaces
translateY-ui-translate-yspaces
unicodeBidiunicode-bidinone
userSelectuser-selectnone
vectorEffectvector-effectnone
verticalAlignvertical-alignnone
viewTimelineview-timelinenone
viewTimelineAxisview-timeline-axisnone
viewTimelineInsetview-timeline-insetnone
viewTimelineNameview-timeline-namenone
viewTransitionNameview-transition-namenone
visibilityvisibilitynone
whiteSpacewhite-spacenone
whiteSpaceCollapsewhite-space-collapsenone
widowswidowsnone
width, wwidthsizes
willChangewill-changenone
wordBreakword-breaknone
wordSpacingword-spacingnone
writingModewriting-modenone
zIndex, zz-indexzIndices
zoomzoomnone

擬似要素とセレクター

PropCSSプロパティテーマのトークン
_accept&[data-accept]none
_active&:active
&[data-active]
none
_after&::afternone
_anyLink&:any-link
&[data-any-link]
none
_autofill&:autofill
&:-webkit-autofill
none
_backdrop&::backdropnone
_before&::beforenone
_between&[data-between]none
_blank&:blank
&[data-blank]
none
_checked&:checked
&[data-checked]
&[aria-checked=true]
none
_child& > *none
_cue&::cuenone
_cueRegion&::cue-regionnone
_dark.ui-dark &:not([data-mode])
[data-mode=dark] &:not([data-mode])
&[data-mode=dark]
none
_default&:defaultnone
_disabled&:disabled
&[disabled]
&[aria-disabled=true]
&[data-disabled]
none
_empty&:emptynone
_enabled&:enabled
&[data-enabled]
none
_end&[data-end]none
_even&:nth-of-type(even)none
_expanded&[data-expanded]
&[aria-expanded=true]
none
_fileSelector&::file-selector-buttonnone
_filled&[data-filled]none
_first&:first-of-typenone
_firstChild& > *:first-childnone
_firstLetter&::first-letternone
_firstLine&::first-linenone
_focus&:focus
&[data-focus]
none
_focusVisible&:focus-visible
&[data-focus-visible]
none
_focusWithin&:focus-within
&[data-focus-within]
none
_fullScreen&:fullscreennone
_grabbed&[data-grabbed]
&[aria-grabbed=true]
none
_grid[role=grid]
&[data-grid]
none
_groupAccept[role=group][data-accept] &
[data-group][data-accept] &
.group[data-accept] &
none
_groupActive[role=group]:active &
[role=group][data-active] &
[data-group]:active &
[data-group][data-active] &
.group:active &
.group[data-active] &
none
_groupBlank[role=group]:blank &
[role=group][data-blank] &
[data-group]:blank &
[data-group][data-blank] &
.group:blank &
.group[data-blank] &
none
_groupChecked[role=group]:checked &
[role=group][data-checked] &
[role=group][aria-checked=true] &
[data-group]:checked &
[data-group][data-checked] &
[data-group][aria-checked=true] &
.group:checked &
.group[data-checked] &
.group[aria-checked=true] &
none
_groupDisabled[role=group]:disabled &
[role=group][disabled] &
[role=group][aria-disabled=true] &
[role=group][data-disabled] &
[data-group]:disabled &
[data-group][disabled] &
[data-group][aria-disabled=true] &
[data-group][data-disabled] &
.group:disabled &
.group[disabled] &
.group[aria-disabled=true] &
.group[data-disabled] &
none
_groupEnabled[role=group]:enabled &
[role=group][data-enabled] &
[data-group]:enabled &
[data-group][data-enabled] &
.group:enabled &
.group[data-enabled] &
none
_groupExpanded[role=group][data-expanded] &
[role=group][aria-expanded=true] &
[data-group][data-expanded] &
[data-group][aria-expanded=true] &
.group[data-expanded] &
.group[aria-expanded=true] &
none
_groupFocus[role=group]:focus &
[role=group][data-focus] &
[data-group]:focus &
[data-group][data-focus] &
.group:focus &
.group[data-focus] &
none
_groupFocusVisible[role=group]:focus-visible &
[role=group][data-focus-visible] &
[data-group]:focus-visible &
[data-group][data-focus-visible] &
.group:focus-visible &
.group[data-focus-visible] &
none
_groupFocusWithin[role=group]:focus-within &
[role=group][data-focus-within] &
[data-group]:focus-within &
[data-group][data-focus-within] &
.group:focus-within &
.group[data-focus-within] &
none
_groupGrabbed[role=group][data-grabbed] &
[role=group][aria-grabbed=true] &
[data-group][data-grabbed] &
[data-group][aria-grabbed=true] &
.group[data-grabbed] &
.group[aria-grabbed=true] &
none
_groupHorizontal[role=group][data-orientation=horizontal] &
[role=group][aria-orientation=horizontal] &
[data-group][data-orientation=horizontal] &
[data-group][aria-orientation=horizontal] &
.group[data-orientation=horizontal] &
.group[aria-orientation=horizontal] &
none
_groupHover[role=group]:hover &
[role=group][data-hover] &
[data-group]:hover &
[data-group][data-hover] &
.group:hover &
.group[data-hover] &
none
_groupIdle[role=group][data-idle] &
[data-group][data-idle] &
.group[data-idle] &
none
_groupInvalid[role=group][data-invalid] &
[role=group][aria-invalid=true] &
[data-group][data-invalid] &
[data-group][aria-invalid=true] &
.group[data-invalid] &
.group[aria-invalid=true] &
none
_groupLoaded[role=group][data-loaded] &
[data-group][data-loaded] &
.group[data-loaded] &
none
_groupLoading[role=group][data-loading] &
[role=group][aria-busy=true] &
[data-group][data-loading] &
[data-group][aria-busy=true] &
.group[data-loading] &
.group[aria-busy=true] &
none
_groupOptional[role=group]:optional &
[role=group][data-optional] &
[data-group]:optional &
[data-group][data-optional] &
.group:optional &
.group[data-optional] &
none
_groupPlaceholderShown[role=group]:placeholder-shown &
[data-group]:placeholder-shown &
.group:placeholder-shown &
none
_groupPressed[role=group][data-pressed] &
[role=group][aria-pressed=true] &
[data-group][data-pressed] &
[data-group][aria-pressed=true] &
.group[data-pressed] &
.group[aria-pressed=true] &
none
_groupReadOnly[role=group][readonly] &
[role=group][data-readonly] &
[role=group][aria-readonly=true] &
[data-group][readonly] &
[data-group][data-readonly] &
[data-group][aria-readonly=true] &
.group[readonly] &
.group[data-readonly] &
.group[aria-readonly=true] &
none
_groupReadWrite[role=group]:read-write &
[role=group][data-read-write] &
[data-group]:read-write &
[data-group][data-read-write] &
.group:read-write &
.group[data-read-write] &
none
_groupReject[role=group][data-reject] &
[data-group][data-reject] &
.group[data-reject] &
none
_groupRequired[role=group]:required &
[role=group][required] &
[data-group]:required &
[data-group][required] &
.group:required &
.group[required] &
none
_groupSelected[role=group][data-selected] &
[role=group][aria-selected=true] &
[data-group][data-selected] &
[data-group][aria-selected=true] &
.group[data-selected] &
.group[aria-selected=true] &
none
_groupUserInvalid[role=group]:user-invalid &
[role=group][data-user-invalid] &
[data-group]:user-invalid &
[data-group][data-user-invalid] &
.group:user-invalid &
.group[data-user-invalid] &
none
_groupValid[role=group]:valid &
[role=group][data-valid] &
[data-group]:valid &
[data-group][data-valid] &
.group:valid &
.group[data-valid] &
none
_groupVertical[role=group][data-orientation=vertical] &
[role=group][aria-orientation=vertical] &
[data-group][data-orientation=vertical] &
[data-group][aria-orientation=vertical] &
.group[data-orientation=vertical] &
.group[aria-orientation=vertical] &
none
_hidden&[hidden]
&[data-hidden]
none
_holiday&[data-holiday]none
_horizontal&[data-orientation=horizontal]
&[aria-orientation=horizontal]
none
_hover&:hover
&[data-hover]
none
_idle&[data-idle]none
_inRange&:in-range
&[data-in-range]
none
_indeterminate&:indeterminate
&[data-indeterminate]
&[aria-checked=mixed]
none
_invalid&[data-invalid]
&[aria-invalid=true]
none
_landscape@media ("orientation": landscape)none
_last&:last-of-typenone
_lastChild& > *:last-childnone
_light.ui-light &:not([data-mode])
[data-mode=light] &:not([data-mode])
&[data-mode=light]
none
_link&:link
&[data-link]
none
_loaded&[data-loaded]none
_loading&[data-loading]
&[aria-busy=true]
none
_marker&::markernone
_mediaDark@media (prefers-color-"scheme": dark)none
_mediaLight@media (prefers-color-"scheme": light)none
_mediaReduceMotion@media (prefers-reduced-"motion": reduce)none
_modal&:modalnone
_nativeActive&:activenone
_nativeChecked&:checkednone
_nativeDisabled&:disabled
&[disabled]
none
_nativeFocus&:focusnone
_nativeFocusVisible&:focus-visiblenone
_nativeFocusWithin&:focus-withinnone
_nativeHidden&[hidden]none
_nativeHover&:hovernone
_nativeReadOnly&[readonly]
&[aria-readonly=true]
none
_nativeTarget&:targetnone
_nativeValid&:validnone
_notAllowed&[data-not-allowed]none
_notChecked&:not(:checked):not([data-checked]):not([aria-checked=true])none
_notFirst&:not(:first-of-type)none
_notFirstChild& > *:not(:first-child)none
_notLast&:not(:last-of-type)none
_notLastChild& > *:not(:last-child)none
_notSelected&:not([data-selected]):not([aria-selected=true])none
_notTarget&:not(:target)none
_odd&:nth-of-type(odd)none
_only&:only-of-typenone
_optional&:optional
&[data-optional]
none
_outRange&:out-of-range
&[data-out-of-range]
none
_outside&:where([data-outside])none
_paused&:paused
&[data-paused]
none
_peerAccept[data-peer][data-accept] ~ &
.peer[data-accept] ~ &
none
_peerActive[data-peer]:active ~ &
[data-peer][data-active] ~ &
.peer:active ~ &
.peer[data-active] ~ &
none
_peerBlank[data-peer]:blank ~ &
[data-peer][data-blank] ~ &
.peer:blank ~ &
.peer[data-blank] ~ &
none
_peerChecked[data-peer]:checked ~ &
[data-peer][data-checked] ~ &
[data-peer][aria-checked=true] ~ &
.peer:checked ~ &
.peer[data-checked] ~ &
.peer[aria-checked=true] ~ &
none
_peerDisabled[data-peer]:disabled ~ &
[data-peer][disabled] ~ &
[data-peer][aria-disabled=true] ~ &
[data-peer][data-disabled] ~ &
.peer:disabled ~ &
.peer[disabled] ~ &
.peer[aria-disabled=true] ~ &
.peer[data-disabled] ~ &
none
_peerEnabled[data-peer]:enabled ~ &
[data-peer][data-enabled] ~ &
.peer:enabled ~ &
.peer[data-enabled] ~ &
none
_peerExpanded[data-peer][data-expanded] ~ &
[data-peer][aria-expanded=true] ~ &
.peer[data-expanded] ~ &
.peer[aria-expanded=true] ~ &
none
_peerFocus[data-peer]:focus ~ &
[data-peer][data-focus] ~ &
.peer:focus ~ &
.peer[data-focus] ~ &
none
_peerFocusVisible[data-peer]:focus-visible ~ &
[data-peer][data-focus-visible] ~ &
.peer:focus-visible ~ &
.peer[data-focus-visible] ~ &
none
_peerFocusWithin[data-peer]:focus-within ~ &
[data-peer][data-focus-within] ~ &
.peer:focus-within ~ &
.peer[data-focus-within] ~ &
none
_peerGrabbed[data-peer][data-grabbed] ~ &
[data-peer][aria-grabbed=true] ~ &
.peer[data-grabbed] ~ &
.peer[aria-grabbed=true] ~ &
none
_peerHorizontal[data-peer][data-orientation=horizontal] ~ &
[data-peer][aria-orientation=horizontal] ~ &
.peer[data-orientation=horizontal] ~ &
.peer[aria-orientation=horizontal] ~ &
none
_peerHover[data-peer]:hover ~ &
[data-peer][data-hover] ~ &
.peer:hover ~ &
.peer[data-hover] ~ &
none
_peerIdle[data-peer][data-idle] ~ &
.peer[data-idle] ~ &
none
_peerInvalid[data-peer][data-invalid] ~ &
[data-peer][aria-invalid=true] ~ &
.peer[data-invalid] ~ &
.peer[aria-invalid=true] ~ &
none
_peerLoaded[data-peer][data-loaded] ~ &
.peer[data-loaded] ~ &
none
_peerLoading[data-peer][data-loading] ~ &
[data-peer][aria-busy=true] ~ &
.peer[data-loading] ~ &
.peer[aria-busy=true] ~ &
none
_peerOptional[data-peer]:optional ~ &
[data-peer][data-optional] ~ &
.peer:optional ~ &
.peer[data-optional] ~ &
none
_peerPlaceholderShown[data-peer]:placeholder-shown ~ &
.peer:placeholder-shown ~ &
none
_peerPressed[data-peer][data-pressed] ~ &
[data-peer][aria-pressed=true] ~ &
.peer[data-pressed] ~ &
.peer[aria-pressed=true] ~ &
none
_peerReadOnly[data-peer][readonly] ~ &
[data-peer][data-readonly] ~ &
[data-peer][aria-readonly=true] ~ &
.peer[readonly] ~ &
.peer[data-readonly] ~ &
.peer[aria-readonly=true] ~ &
none
_peerReadWrite[data-peer]:read-write ~ &
[data-peer][data-read-write] ~ &
.peer:read-write ~ &
.peer[data-read-write] ~ &
none
_peerReject[data-peer][data-reject] ~ &
.peer[data-reject] ~ &
none
_peerRequired[data-peer]:required ~ &
[data-peer][required] ~ &
.peer:required ~ &
.peer[required] ~ &
none
_peerSelected[data-peer][data-selected] ~ &
[data-peer][aria-selected=true] ~ &
.peer[data-selected] ~ &
.peer[aria-selected=true] ~ &
none
_peerUserInvalid[data-peer]:user-invalid ~ &
[data-peer][data-user-invalid] ~ &
.peer:user-invalid ~ &
.peer[data-user-invalid] ~ &
none
_peerValid[data-peer]:valid ~ &
[data-peer][data-valid] ~ &
.peer:valid ~ &
.peer[data-valid] ~ &
none
_peerVertical[data-peer][data-orientation=vertical] ~ &
[data-peer][aria-orientation=vertical] ~ &
.peer[data-orientation=vertical] ~ &
.peer[aria-orientation=vertical] ~ &
none
_picture&:picture-in-picturenone
_placeholder&::placeholder
&[data-placeholder]
none
_placeholderShown&:placeholder-shownnone
_playing&:playing
&[data-playing]
none
_portrait@media ("orientation": portrait)none
_pressed&[data-pressed]
&[aria-pressed=true]
none
_print@media printnone
_readOnly&[readonly]
&[data-readonly]
&[aria-readonly=true]
none
_readWrite&:read-write
&[data-read-write]
none
_reject&[data-reject]none
_required&:required
&[required]
none
_ripple& .ui-ripplenone
_scrollbar&::-webkit-scrollbar
&[data-scrollbar]
none
_scrollbarButton&::-webkit-scrollbar-buttonnone
_scrollbarCorner&::-webkit-scrollbar-cornernone
_scrollbarThumb&::-webkit-scrollbar-thumbnone
_scrollbarTrack&::-webkit-scrollbar-tracknone
_scrollbarTrackPiece&::-webkit-scrollbar-track-piecenone
_selected&[data-selected]
&[aria-selected=true]
none
_selection&::selectionnone
_start&[data-start]none
_target&:target
&[data-target]
none
_today&[data-today]none
_userInvalid&:user-invalid
&[data-user-invalid]
none
_valid&:valid
&[data-valid]
none
_vertical&[data-orientation=vertical]
&[aria-orientation=vertical]
none
_visited&:visitednone
_weekend&:where([data-weekend])none

アットルール

Prop説明
_container
_media
_supports

その他のProps

Prop説明
apply
isTruncated
layerStyle
lineClamp
textStyle
vars

GitHubでこのページを編集する

スタイルシステムテーマ