I was working on project where I used React, Next.js with Tailwind CSS, and I did some customization in styling, like used react-slick for slider, and I applied custom CSS to react-slick slider classes and made slider as I want to... but meanwhile I am trying to apply default custom fonts to my entire project. In that case, I made some changes in the file of
File tailwind.config.js
theme: {
fontFamily: {
customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
},
extend: {},
},
After that, I got a compile error:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/slick-carousel/slick/slick-theme.css
ReferenceError: defaultTheme is not defined
My Tailwind CSS Config.js file for reference
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./page-section/**/*.{js,ts,jsx,tsx}",
"./page-section/**/**/*.{js,ts,jsx,tsx}",
],
theme: {
fontFamily: {
customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
},
extend: {
fontFamily: {
customfontname: ['Segoe UI',
'Helvetica Neue',
'Arial',
'sans-serif',
...defaultTheme.fontFamily.customfontname],
},
}
},
plugins: [],
};
This is the code of people who trying to help me, but I getting the same error as I mentioned...
/** #type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
mode: "jit",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./page-section/**/*.{js,ts,jsx,tsx}",
"./page-section/**/**/*.{js,ts,jsx,tsx}",
],
theme: {
fontFamily: {
customfontname: [
"Segoe UI",
"Helvetica Neue",
"Arial",
"sans-serif",
...defaultTheme.fontFamily.customfontname,
],
},
extend: {},
},
plugins: [],
};
because defaultTheme is not defined in your tailwind.config.js
file. It seems like you're trying to extend the default font family of
the theme by adding a new custom font, but the defaultTheme variable
is not available in the scope of the configuration file.
In order to extend the default font family, you need to import the default theme from the Tailwind CSS package, like this:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
fontFamily: {
customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.sans],
},
extend: {},
},
variants: {},
plugins: [],
}
This way you can import the default theme and use it to add your custom font to the default font family.
Also, you can use sans instead of customfontname, because it's a default font family key in Tailwind CSS.
Another way to apply a custom font is to import the font in the _app.js file and use that font in the global CSS class.
It's important to note that this error can also be caused by any other CSS file that you've imported in your project which might be using the 'defaultTheme' variable, but it's not defined.
Add your customfontname inside extend of your theme
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: { // 👈 Add it inside this
fontFamily: {
customfontname: ['Segoe UI',
'Helvetica Neue',
'Arial',
'sans-serif',
/*...*/ defaultTheme.fontFamily.customfontname],
},
}
}
}
Related
I am a beginner in material react. I used a palette in the theme in my code, but it shows me a different color code when it displays. please guide me
theme code
import {createMuiTheme} from "#material-ui/core";
const primaryColor="#FF4D23";
const Theme = createMuiTheme({
overrides: {
MuiTypography: {
root: {
fontFamily: "shabnam !important",
}
},
palette:{
primary:{
main:primaryColor,
}
}
}
});
export default Theme;
style code
LogoText:{
color:theme.palette.primary.main,
fontSize:'23px ',
fontWeight:600,
marginRight:'10px'
},
But it shows
**
color: #3f51b5;
**
Working with Chakra for the first time and trying to change the default font to Times New Roman in Chakra UI but get no effect.
Did an import, assigned new theme, passed it as props to ChakraProvider but nothing happens in code
index.js
import {extendTheme, ChakraProvider} from "#chakra-ui/react"
const customTheme = {
fonts: {
body: 'Times New Roman, sans-serif',
heading: 'Times New Roman, sans-serif',
mono: 'Times New Roman, sans-serif', }
const theme = extendTheme({customTheme})
ReactDOM.render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<App/>
</ChakraProvider>
</React.StrictMode>,
document.getElementById('root')
);
My text component doesn't seem to change
import {Text} from '#chakra-ui/react'
<Text> Some text </Text>
You can see how to do this on their docs.
Create a theme.js file where we will override the default theme
Inside of here add the following:
// importing the required chakra libraries
import { theme as chakraTheme } from '#chakra-ui/react'
import { extendTheme } from "#chakra-ui/react"
// declare a variable for fonts and set our fonts. I am using Inter with various backups but you can use `Times New Roman`. Note we can set different fonts for the body and heading.
const fonts = {
...chakraTheme.fonts,
body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`,
heading: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`
}
// declare a variable for our theme and pass our overrides in the e`xtendTheme` method from chakra
const customTheme = extendTheme(overrides)
// export our theme
export default customTheme
Wrap our app in the theme
// import our theme
import theme from '../customTheme.js'
// wrap our application with the theme. This can be passed onto the ChakraProvider.
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
I can see that your extendTheme usage is wrong.
const theme = extendTheme({customTheme}) the curly brackets shouldn't be there. This essentially translates to:
const theme = {
customTheme: { // <-- it adds the custom theme as a customTheme property
fonts: {
...
}
}
}
Just remove the curly brackets and you're good to go!
This works for me using chakra and nextjs.
create a file styles.css with
#font-face {
font-family: "Font";
src: url('../your/path/Font.woff');
font-weight: normal;
font-style: normal;
}
in your index.js
import '../path/styles/styles.css'
Last version:
const overrides = extendTheme({
styles: {
global: (props: StyleFunctionProps) => ({
body: {
fontFamily: '"Roboto", "Noto", sans-serif"'
},
}),
},
})
const AppTheme = extendTheme(overrides)
export default AppTheme;
Use:
<ChakraProvider theme={AppTheme}>
<Component {...pageProps} />
</ChakraProvider>
I'm writing a new React UI component library using styled-components and styled-system. This library will be used on a side project and should be published as a npm library.
I'm creating a button component and considering almost every component should have a font-family Roboto like this:
const BaseButton = styled.div`
font-family: 'Roboto', sans-serif;
`;
Considering that each component is independent from each other, where is the best place to set a default font-family once for my entire component library?
Thank you
If you want mostly all your components to use Roboto you should set the #font-face up globally.
import { createGlobalStyle } from "styled-components";
import Roboto from './Roboto.otf';
import SecondaryFont from './SecondaryFont.otf';
const GlobalStyles = createGlobalStyle`
#font-face {
font-family: 'Roboto';
src: url('${Roboto}') format('opentype');
}
#font-face {
font-family: 'SecondaryFont';
src: url('${SecondaryFont}') format('opentype');
}
body {
font-family: 'Roboto', sans-serif;
}
`
const YourCustomProvider = ({ children }) => (
<>
<GlobalStyles />
{children}
</>
)
// Inform users to wrap their app with your provider
const App = () => {
return (
<YourCustomProvider>
// Their app
</YourCustomProvider>
)
}
Then to use the secondary font on specific components.
const RandomComponent = styled.div`
font-family: "SecondaryFont"
`
I am trying to save some PIXIJS styles in a config.js file, so that I could reuse these style contants in other JavaScript files.
Is it possible to define these multiple constants (fontFamily, fontSize, and fill) together in the config-file?
const styleText = new PIXI.TextStyle({
fontFamily: "Arial",
fontSize: "20",
fill: "0xf0000f",
});
Create js file
export default class{
fontFamily: "Arial",
fontSize: "20",
fill: "0xf0000f",
}
and in your file use
import TextStyle from './path/to/config.js';
const styleText = new PIXI.TextStyle(TextStyle);
If you need to have separate values alongside TextStyles object add these lines to config.js
export const lbl1 = 'lbl1';
export const lbl2 = 'lbl2';
and change import statement to:
import TextStylel, {bl1, lbl2} from './path/to/config.js';
is it possible to separate var styles = StyleSheet.create from React.component into different script in react native?
that's possible. just create a js file with this pattern:
'use strict';
var React = require('react-native');
var myStyles = React.StyleSheet.create({
style1: { },
style2: { }
)}
module.exports = myStyles;
then in your component js use require to use that style sheet e.g. assuming your style js file is named phongyewtong.js
var s = require('../the/path/to/phongyewtong');
usage:
<View style = {s.style1} />
Both of the below links explain very well how to move styles out of your 'structural' code :
https://hackernoon.com/manage-react-native-project-folder-structure-and-simplify-the-code-c98da77ef792
https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb
Basically (copying code snippet from above link #2) have your styles in separate JS, say text.js file :
const text = StyleSheet.create({
p: {
color: 'black',
fontFamily: 'Open Sans',
fontSize: 14,
},
title: {
fontWeight: 'bold',
color: 'black',
fontFamily: 'Open Sans',
fontSize: 20,
}
});
export default text;
In React component, you can simply import this text style, and use it directly
<Text style={text.p}>settings</Text>
Hope this helps.
In a more recent React Version (0.31) I used this code:
import React, { Component, PropTypes } from 'react';
import { StyleSheet } from 'react-native';
var styles = StyleSheet.create({
...
});
module.exports = styles;