Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Multi-language support in StyleX

I have made a decision to try StyleX in a new React project. I usualy build styles with style-components but I find the simplicity of StyleX to be very attractive.

I have gone through StyleX short documentation and the Thinking in StyleX
 section a few times. However, I am stuck at two fundamental points:

  1. In a multi-language website, how I go about defining different styles like direction and fontFamily for different languages. Is this a matter of Theme, or is it more about defining styles dynamically? Should I create a theme for language and another theme for colors and other design elements and apply both themes as explained here?

  2. When building a components library with StyleX, should every component expect to receive "custom style(s)" and a "theme" as props?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is how I implemented the required language feature:

    I created a Root component which accepts lang and children as props:

    import { ReactNode, useEffect } from 'react';
import * as stylex from '@stylexjs/stylex';
import { fonts } from './tokens.stylex';

const styles = stylex.create({
  arabic: {
    fontFamily: fonts.arabicSans,
  },
  english: {
    fontFamily: fonts.englishSans,
  },
});

interface Props {
  lang: 'en' | 'ar'; // other languages can be set here
  children: ReactNode;
}

const Root = ({ lang = 'en', children }: Props) => {
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.className = stylex.props(
      lang === 'ar' ? styles.arabic : styles.english,
      styles.base
    ).className!;
  }, [lang]);

  return children;
};

export default Root;

    In the App component, I used the component and passed the current value of lang to it.


  2. 0

    CSS supports LTR and RTL languages using logical style properties. StyleX supports them. TLDR; Don’t use any styles with the words “left” or “right” in them. For example, use marginInlineStart and marginInlineEnd. This will make your styles work correctly for all languages without needing separate styles.

    Next, direction is actually a CSS property, so you can apply direction: ‘ltr’ or direction: ‘rtl’ based on the language that is current active on the page. Of course, you should also set the lang attribute.

    If you can’t apply styles on your html tag directly, using an effect as explained by @damascus is a valid solution.

    If you’re trying to change themes per languages, applying multiple themes is the correct solution too.

    When building a components library with StyleX, should every component expect to receive "custom style(s)" and a "theme" as props?

    This depends on how strict your designs are. If a component can be customized, it should accept styles. It’s probably not useful to accept a theme prop in most cases though, because themes are inherited anyway and can be applied on a container element.

    A theme prop only makes sense on large “container” components where you may reasonably want to change the active theme.

    Overall, your instincts are correct. Feel free to create a discussion post on the StyleX repo with further questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search