Mixing
Change font of react-select component using theme
2
I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:
<Select
theme={theme}
/>
But that didn't work. This also didn't work:
<Select
theme={theme => ({
...theme,
typography: {
...theme.typography,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}
})}
/>
Demo here
I figured out how to do it with styles (demo):
const customStyles = {
container: (provided, state) => ({
...provided,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}),
};
<Select
styles={customStyles}
/>
But it would be nice to use themes, since I already created a theme with my font.
material-ui react-select
asked Nov 20 '18 at 0:50
MelissaMelissa
877
add a comment |
2
I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:
<Select
theme={theme}
/>
But that didn't work. This also didn't work:
<Select
theme={theme => ({
...theme,
typography: {
...theme.typography,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}
})}
/>
Demo here
I figured out how to do it with styles (demo):
const customStyles = {
container: (provided, state) => ({
...provided,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}),
};
<Select
styles={customStyles}
/>
But it would be nice to use themes, since I already created a theme with my font.
material-ui react-select
asked Nov 20 '18 at 0:50
MelissaMelissa
877
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03
add a comment |
2
2
2
I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:
<Select
theme={theme}
/>
But that didn't work. This also didn't work:
<Select
theme={theme => ({
...theme,
typography: {
...theme.typography,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}
})}
/>
Demo here
I figured out how to do it with styles (demo):
const customStyles = {
container: (provided, state) => ({
...provided,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}),
};
<Select
styles={customStyles}
/>
But it would be nice to use themes, since I already created a theme with my font.
material-ui react-select
asked Nov 20 '18 at 0:50
MelissaMelissa
877
I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:
<Select
theme={theme}
/>
But that didn't work. This also didn't work:
<Select
theme={theme => ({
...theme,
typography: {
...theme.typography,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}
})}
/>
Demo here
I figured out how to do it with styles (demo):
const customStyles = {
container: (provided, state) => ({
...provided,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}),
};
<Select
styles={customStyles}
/>
But it would be nice to use themes, since I already created a theme with my font.
material-ui react-select
material-ui react-select
asked Nov 20 '18 at 0:50
MelissaMelissa
877
asked Nov 20 '18 at 0:50
MelissaMelissa
877
edited Nov 20 '18 at 1:13
Melissa
asked Nov 20 '18 at 0:50
MelissaMelissa
877
asked Nov 20 '18 at 0:50
MelissaMelissa
877
asked Nov 20 '18 at 0:50
MelissaMelissa
877
877
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03
add a comment |
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03
add a comment |
1 Answer
1
active
oldest
votes
1
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384707%2fchange-font-of-react-select-component-using-theme%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
add a comment |
1
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
add a comment |
1
1
1
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
answered Nov 20 '18 at 18:59
LauraLaura
1,174619
1,174619
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384707%2fchange-font-of-react-select-component-using-theme%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In your example theme is already available.. i have tried to show in example check: codesandbox.io/s/9jx2z18jwy if MuiProvider at root you get theme via this: material-ui.com/customization/themes/… i have console logged both properties, to show how to use.
– Ajit T Stephen
Nov 20 '18 at 10:54
Thanks. Your example has: styles={{ container: (provided, state) => ({ ...provided, fontFamily: theme.typography.fontFamily }) }} Is there a way to use the theme attribute, instead of style attribute? theme = {theme}
– Melissa
Nov 20 '18 at 17:03