Having issues with changing the default typography for the Rebass <Text> and <Heading> components in the Theme. According to the Rebass docs the "Text and Heading components use a custom theme.text object." When looking at the types for the Rebass Theme, they indicate that the <Text> component will use the theme.text.default object if defined:
// #theme-ui/css/dist/declarations/src/types.dt
/**
* Text style variants can be defined in the `theme.text` object. The `Text`
* component uses `theme.text.default` as its default variant style.
*
* #see https://theme-ui.com/theme-spec#variants
* #see https://theme-ui.com/components/variants
* #see https://theme-ui.com/components/text#variants
*/
text?: Record<string, ThemeUIStyleObject>;
When trying to set them in the Theme based on the docs, the updates are not applied to either the <Text> or <Heading> components:
export const theme: Theme = {
fonts: {
heading: 'Brush Script MT',
text: 'Arial, sans-serif',
},
text: {
default: {
fontFamily: 'text',
},
heading: {
fontFamily: 'heading',
},
},
}
<Text>Some dummy text</Text>
<Heading>Some dummy heading</Heading>
If the root object is set in the Theme, the typography will be applied to the <Text> component, but not the <Heading>:
styles: {
root: {
fontFamily: 'text',
}
}
Looking at the Rebass Preset Theme adds a bit more confusion, here is the text object:
// rebass variants
text: {
heading: {
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
},
display: {
fontFamily: 'heading',
fontWeight: 'heading',
lineHeight: 'heading',
fontSize: [ 5, 6, 7 ],
},
caps: {
textTransform: 'uppercase',
letterSpacing: '0.1em',
},
},
Does this indicate that display and caps should be used as a variant on the <Text> component? If so, what about default? When trying: <Text variant="display"> it does not work.
Just need some clarity around how this is meant to work as there's not much to go in the Rebass docs. The goal would be to set a default typography for each and be able to override when desired by passing a variant to the <Text> or <Heading> components. It appears this is the intention, but all attempts to use it are failing. Setting the <Text> default via the styles.root object would be fine, however, it would be nice to be able to override with a variant when needed and the <Heading> typography would still need to be set somehow. Your thoughts, insights, feedback are appreciated, thanks!
Here are some related issues/commits from the Rebass Github:
https://github.com/rebassjs/rebass/issues/781
https://github.com/rileybracken/rebass/commit/8214661166f92417593b197af950e5229b1a3054
https://github.com/rebassjs/rebass/issues/722
Related
I'm working on converting my app from rebass to chakra and currently dealing with a component that needs 16px padding on mobile, and 24px padding on tablet/desktop. In my component I have <Component px={[4, 6, 6]} />
Looking at this chart, I would expect to be able to use these numbers 4, 6 because I have confirmed the font-size is 16px. However, the actual values I'm seeing are 32px on mobile and 128px for tablet/desktop. I think something might be up with my chakra setup because I'm even unable to use inbetween values like 3.5, however I have had no problems with it so far.
My chakra setup is pretty simple at the moment because I'm early in the migration and I'm not messing with the default chakra values for the space key so I don't know what's causing these weird numbers.
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: false,
}
const Button: ComponentStyleConfig = {
baseStyle: {
fontWeight: 'bold',
},
variants: {
primary: {
letterSpacing: '-0.19px',
borderRadius: '30px',
paddingLeft: '45px',
paddingTop: '14px',
paddingRight: '45px',
paddingBottom: '14px',
height: '56px',
backgroundColor: colors.white,
color: colors.black,
},
},
// The default size and variant values
defaultProps: {
variant: 'primary',
},
}
const theme = {
colors,
styles: globalStyles,
components: {
Button,
},
}
export default extendTheme({ ...theme, config })
I know the basics with MUI's createTheme and changing component defaults like Typography, but how do I select classNames? In my situation, I want to only create themes for specific Typography/Grids in tandem with breakpoints, but there's no clear example of changing target components in the docs. Here's what I have so far:
let theme = createTheme({
typography: {
fontFamily: "Inter, sans-serif",
color: "#212b37",
h5: {
fontSize: 40,
},
body: {
fontSize: 18,
},
},
root: {
sample_class: {
fontSize: 40,
}
}
});
I saw the docs mentioned root so I just winged it and added sample_class thinking that'll select the element with the same className.
Just for reference, I'm using MUI version ^5.0.0-rc.1.
Perhaps you can try something like this in createTheme:
Solution 1:
MuiTypography: {
styleOverrides: {
h6: ({ ownerState }) => (ownerState.className === "MyClass" ? { color: "red" } : {}),
},
},
where "MyClass" is the name of the class you want to apply theme stylings to.
Solution 2:
This is cleaner.
MuiTypography: {
styleOverrides: {
h6: {
'&.MyClass': { color: 'red' },
},
},
},
Then you can do this with your Typography element:
<Typography variant="h6" className="MyClass">Hello world</Typography>
If you have VS Code, you can Command+Click until you get to the TypographyClasses interface, which gives you a full list of typography classes to override.
Here are some links of ownerState which can help on component overriding:
https://mui.com/customization/theme-components/
https://mui.com/customization/unstyled-components/
This was also my solution for trying to style another component, such as the MuiAccordion, but I didn't want to override the existing variants since they had their own default styles.
Is it possible to style the headers of the react-data-table-component? I tried this
columns: [
{
name: "Name",
selector: "name",
sortable: true,
style: {
background: "orange",
},
},
],
But it styles all the cells underneath that header, not the header itself.
Please let me know if there is documentation that I study this component API from.
I didn't find any mechanism to customize only the header cells, but you could style them with CSS selectors by passing an id in each column object and using the rdt_TableCol class
columns: [
{
name: "Name",
selector: "name",
id: "name",
sortable: true,
style: {
background: "orange",
},
},
],
and in a CSS file
[data-column-id="name"].rdt_TableCol {
background-color: orange;
}
https://codesandbox.io/s/style-header-cell-rdt-c1y35
of course, this method is susceptible to internal changes in the lib, make sure to fix the version and revisit the code if you upgrade the version
In the DataTable props you can assign a style to the customStyles property like so:
import { tableCustomStyles } from './tableStyle.jsx';
<DataTable
customStyles={tableCustomStyles}
/>
And then in the tableStyle.jsx file you can customize all properties of the table like this:
const tableCustomStyles = {
headCells: {
style: {
fontSize: '20px',
fontWeight: 'bold',
paddingLeft: '0 8px',
justifyContent: 'center',
backgroundColor: '#FFA500'
},
},
}
export { tableCustomStyles };
Here is the API reference: https://react-data-table-component.netlify.app/?path=/docs/api-custom-styles--page
And here is the styles.ts file from the repo that shows some of the properties you can manipulate: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
I want to use fontweight 300 globally in my Material UI React project, however the default setting is 400. I only figured out how to override fontWeight on a specific component (like h3 in the code below), so i ask for help in setting it globally for all Material UI Components that i will be using in the future.
overrides: {
MuiTypography: {
h3: {
fontWeight: 300
}},
MuiTableCell:{
root:{
fontWeight: 200
}
},
},
In the code example below i change FontFamily and borderRadius for all components at the same time using createMuiTheme, but i don't know how to set FontWeight to all Material UI components at the same time.
const theme = createMuiTheme({
typography: {
fontFamily: [
'Sora',
'sans-serif'
].join(','),
},
shape:{
borderRadius:12
},
tru to add "" to fontWeight
h3: {
"fontWeight": 200,
},
There is an allVariants property you can use in your theme's typography configuration:
import { createTheme } from "#mui/material/styles";
// Create a theme instance.
const theme = createTheme({
typography: {
allVariants: {
fontWeight: 300,
},
},
});
export default theme;
We are using 1.4.5 material-ui in our application. Now we are trying to set one font size for all of the components in our application. For example we want to set fontSize: 14px, for headers / buttons / paragraph /list... and so on.
Here is our sample theme configuration:
import { createMuiTheme } from '#material-ui/core/styles';
import purple from '#material-ui/core/colors/purple';
import green from '#material-ui/core/colors/green';
const theme = createMuiTheme({
typography: {
fontSize: 14,
},
palette: {
primary: purple,
secondary: green,
},
status: {
danger: 'orange',
},
});
If you notice we have tried to define the font size in a typography object but with this configuration, material-ui computes a font size according to the formula given at this link.
We are trying to achieve a 14px font-size application wide but we can not find an option to do this. One option can be a pxToRem function but I am not sure how should I overwrite that function and what should be my function? The other option is to define styles in every component and I think that is a bit overkill since we should able to do it with theme object.
Please help me if you can think of a way to set the font size globally.
Your help will be greatly appreciated.
NOTE: I am not sure why somebody will downvote my answer since my
answer is based in material-ui docs. Here is the link. Please
expand typography section and you will see this is how all the fonts
are set. Please comment here the reason for the downvote. Also, note
when I wrote this answer I was using Material UI 1.4.5
I will post the solution that solved my problem. Hopefully, this will help someone else as well:
I end up defining the font size in a typography property of my theme. Here is how I set it up in the theme;
import { createMuiTheme } from '#material-ui/core/styles';
import purple from '#material-ui/core/colors/purple';
import green from '#material-ui/core/colors/green';
const theme = createMuiTheme({
typography: {
fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
fontSize: 13,
display4: {
fontSize: 13,
},
display3: {
fontSize: 13,
},
display2: {
fontSize: 13,
},
display1: {
fontSize: 13,
},
headline: {
fontSize: 13,
},
title: {
fontSize: 13,
},
subheading: {
fontSize: 13,
},
body2: {
fontSize: 13,
},
body1: {
fontSize: 13,
},
caption: {
fontSize: 13,
},
button: {
fontSize: 13,
},
},
palette: {
primary: purple,
secondary: green,
},
status: {
danger: 'orange',
},
});
I have noticed if you used Div instead of PAPER element sometimes formatting does not apply (bug with material-ui??). So I end up creating a global class which I applied to any elements which were overriding my theme styles.
overRidefonts: {
fontSize: 13,
fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
},