diff --git a/doc/docs/advanced/get-token-value.mdx b/doc/docs/advanced/get-token-value.mdx new file mode 100644 index 00000000..ac27879f --- /dev/null +++ b/doc/docs/advanced/get-token-value.mdx @@ -0,0 +1,30 @@ +--- +sidebar_position: 1 +--- + +# Get token value with useSxToken + +To get individual token values for a theme, you can use the `useSxToken` hook. + +This is useful when it is cumbersome to get the style by passing `SxProps` to the `useSx` hook or when individual token values are needed. + +```tsx +const MyView = ( + { + disabled, + readonly + }:{ + disabled?: boolean; + readonly?: boolean; + }) => { + const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200'); +g + return +} +``` + +:::info +To operate properly, you must use it in the Context inside `StyledSystemProvider` or pass the theme object as an option. + +Additionally, `undefined` is returned when attempting to reference a key that does not exist. +::: \ No newline at end of file diff --git a/doc/docs/advanced/global-theme-value.mdx b/doc/docs/advanced/global-theme-value.mdx index 60a52e6a..11797110 100644 --- a/doc/docs/advanced/global-theme-value.mdx +++ b/doc/docs/advanced/global-theme-value.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 2 title: Get Theme value in global --- diff --git a/doc/i18n/ko/docusaurus-plugin-content-docs/current/advanced/get-token-value.mdx b/doc/i18n/ko/docusaurus-plugin-content-docs/current/advanced/get-token-value.mdx new file mode 100644 index 00000000..4ad5f37c --- /dev/null +++ b/doc/i18n/ko/docusaurus-plugin-content-docs/current/advanced/get-token-value.mdx @@ -0,0 +1,30 @@ +--- +sidebar_position: 1 +--- + +# useSxToken를 이용해 토큰값 얻기 + +테마의 개별적인 토큰 값을 얻으려면 `useSxToken` 훅을 사용할 수 있습니다. + +이는 `SxProps`를 `useSx` 훅에 전달해 style을 얻기 번거롭거나 개별적인 토큰 값이 필요할 때 유용합니다. + +```tsx +const MyView = ( + { + disabled, + readonly + }:{ + disabled?: boolean; + readonly?: boolean; + }) => { + const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200'); + + return +} +``` + +:::info +`StyledSystemProvider`내부의 Context에서 사용하거나 옵션으로 테마 객체를 전달해야 정상적으로 동작합니다. + +또한, 존재하지 않는 키를 참조하려고 할 시에도 `undefined`가 반환됩니다. +::: \ No newline at end of file