Description
Hi,
I'm having trouble displaying the component's font-style props when I use the browser's inspect element. I'm warning you that the component's visual result is correct, what's wrong is that it's not displaying the font-style props.
Below I show and reproduce what's happening:
1 - When I declare “sans-serif” in CSS, the font-style props stop being displayed:
2 - When I don't declare “sans-serif” in CSS and notice that the font-style props are displayed:
3 - I want to declare “sans-serif” in the font-style and have all props displayed when inspecting element.
4 - Here are my settings:
i. main.ts
/** @type{import("@storybook/react-webpack5").StorybookConfig} /
module.exports = {
stories: [
"../src/**/.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
'@storybook/addon-a11y',
"@storybook/addon-links",
"@chromatic-com/storybook",
"@storybook/addon-essentials",
"@storybook/addon-react-native-web",
"@storybook/addon-webpack5-compiler-babel",
],
staticDirs: ['./public', {from: '../assets/fonts', to: 'fonts'}],
framework: {
name: "@storybook/react-webpack5",
options: { fastRefresh: true },
},
docs: {},
typescript: {
reactDocgen: "react-docgen-typescript"
},
ii. babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }],
['transform-inline-environment-variables', {
include: ['APP_VARIANT']
}]
],
};
};
iii. preview-head.html
<style> @font-face { font-weight: 400; font-family: inter; src: url('assets/fonts/inter_400.ttf'); } </style>};
iv. package.json
"devDependencies": {
"@babel/core": "7.26.7",
"@babel/preset-env": "7.26.7",
"@babel/preset-typescript": "7.26.0",
"@babel/runtime": "7.20.0",
"@chromatic-com/storybook": "3.2.4",
"@commitlint/cli": "19.6.1",
"@commitlint/config-conventional": "19.6.0",
"@emotion/jest": "11.13.0",
"@eslint/js": "9.19.0",
"@gorhom/bottom-sheet": "5.0.6",
"@react-native-async-storage/async-storage": "2.1.0",
"@react-native/babel-preset": "0.75.3",
"@react-native/metro-config": "0.75.3",
"@react-native/typescript-config": "0.75.3",
"@storybook/addon-essentials": "8.3.5",
"@storybook/addon-interactions": "8.3.5",
"@storybook/addon-links": "8.3.5",
"@storybook/addon-onboarding": "8.3.5",
"@storybook/addon-react-native-web": "0.0.27",
"@storybook/addon-webpack5-compiler-babel": "3.0.5",
"@storybook/addon-webpack5-compiler-swc": "2.1.0",
"@storybook/blocks": "8.3.5",
"@storybook/react": "8.3.5",
"@storybook/react-webpack5": "8.3.5",
"@storybook/test": "8.3.5",
"@testing-library/jest-native": "5.4.3",
"@testing-library/react-native": "12.7.2",
"@tsconfig/react-native": "3.0.5",
"@types/jest": "29.5.13",
"@types/react-test-renderer": "18.3.0",
"@typescript-eslint/eslint-plugin": "8.21.0",
"@typescript-eslint/parser": "8.21.0",
"auto-changelog": "2.5.0",
"babel-jest": "29.7.0",
"babel-loader": "^9.2.1",
"babel-plugin-react-native-web": "0.19.13",
"commitizen": "4.3.1",
"eslint": "9.19.0",
"eslint-config-prettier": "10.0.1",
"eslint-plugin-prettier": "5.2.3",
"eslint-plugin-react": "7.37.4",
"eslint-plugin-react-native": "5.0.0",
"eslint-plugin-storybook": "0.11.3",
"globals": "15.14.0",
"jest": "29.6.3",
"lint-staged": "15.4.3",
"lodash": "4.17.21",
"lodash.countby": "4.6.0",
"metro-react-native-babel-preset": "0.77.0",
"plop": "4.0.1",
"pre-commit": "1.2.2",
"prettier": "3.4.2",
"react-devtools": "6.1.0",
"react-dom": "18.3.1",
"react-native-gesture-handler": "2.22.1",
"react-native-reanimated": "3.16.7",
"react-native-safe-area-context": "5.1.0",
"react-native-svg": "15.11.1",
"react-native-web": "0.19.13",
"react-test-renderer": "18.3.1",
"storybook": "8.3.5",
"ts-dedent": "2.2.0",
"typescript": "5.7.3",
"typescript-eslint": "8.21.0"
},
Note: The project's Theme is configured in preview.tsx
I appreciate any and all help, as I have been trying to solve this problem for 2 days.