Is there any way to modify the text from the "Now" and "Ok" button in Ant Design Time Picker? Either using react or antd.
Thanks in advance.
You can control the text of the "Now" and "Ok" buttons by using the locale prop. You must provide a complete locale configuration, not just the lang.now and lang.ok properties. So you can import one of the standard language configs and merge them.
import { TimePicker } from "antd";
import "antd/dist/antd.css";
import locale from "antd/es/date-picker/locale/de_DE";
console.log(locale);
export default () => (
<TimePicker
locale={{
...locale,
lang: {
...locale.lang,
now: "Current Time",
ok: "Submit",
}
}}
/>
);
You can also set sitewide labels using a ConfigProvider.
I was looking at props if something is available to modify the footer, the only prop I found relevant to footer was 'renderExtraFooter', seems like there is nothing from ant that we can use to replace the text of these buttons.
However, there is a CSS way to replace the text using ::after selector like below.
a.ant-picker-now-btn {
font-size: 0;
}
a.ant-picker-now-btn:after {
content: "ABC";
font-size: 16px; /* original font size */
}
Sharing the codesandbox below -
https://codesandbox.io/s/basic-antd4150-forked-pyd95?file=/index.css
Related
Using Mui styled function to style both jsx elements and MUI components. The displayName is not showing when I debug the element in Chrome or any browser for that matter.
Anyone know how to fix this.
I'm using Vite for my setup.
const MyComponent = styled('div')`
display: flex;
`;
As you can see from the below screenshot its not showing MyComponent display name instead its showing css-1vht943
You can see class only inside the Element tab. When you click on one of the lines which contains the class name.
You can find all the CSS related to that class under the styles tab including display name for your case. Please check the image below
If you want to have a name I think you can use styled('div', { name: 'MyTheme'}), then you will see something like <div class="css-t7mscw-MyTheme-root"></div>. Don't know if this is what you want, but here it is vaguely mentioned in the doc.
I'm using react-tabulator for a component: http://tabulator.info/docs/4.0/frameworks
I have put the component on the page in my app but am struggling to do anything with the styling. Right now, the component just displays everything vertically and looks really bad:
I want to display this horizontally in something that looks like a normal tabular format. I would also like to change column width. I've found limited documentation examples. Someone did ask a similar question and in this StackOverflow thread: How to style react-tabulator table? but I've not been able to edit the styles.css stylesheet to do anything useful.
Here is my component code:
import React from 'react'
import { ReactTabulator } from 'react-tabulator'
import 'react-tabulator/lib/styles.css';
const TabularData = (props) => {
const dataArray = []
//gets just first streelights record
for (const [i, v] of props.streetlights.features.entries()) {
if (i < 1) {
dataArray.push(v.properties); // properties of each item is what contains the info about each streetlight
}
}
let columns = [
{title:"WORKLOCATI", field:"WORKLOCATI"},
{title:"WORKREQUES", field:"WORKREQUES"},
{title:"WORK_EFFEC", field:"WORK_EFFEC"},
{title:"WORK_REQUE", field:"WORK_REQUE"},
]
return (
<ReactTabulator
columns={columns}
layout={"fitData"}
data={dataArray}
/>
)
}
export default TabularData
The css in react-tabulator/lib/styles.css is just the most base-level css.
Try importing one of the pre-built themes:
import "react-tabulator/css/bootstrap/tabulator_bootstrap.min.css";
There are a whole bunch of them in the css folder, and you can use them as a basis for creating your own.
Minimum working example here.
To get the right styling you will also have to import tabulator.min.css in your module, which is the theme, according to here.
Your imports should look like this:
import { ReactTabulator } from 'react-tabulator'
import 'react-tabulator/lib/styles.css';
import 'react-tabulator/lib/css/tabulator.min.css'; // theme
Without it, it looks like the image you posted:
With it, it looks like this:
In the folder node_modules/react-tabulator/css you can find more themes.
I noticed most form elements in the Reactstrap documentation have a PropType of a cssModule. I would assume that means I could override the default Reactstrap styles and do something like this:
Formtext.module.css
.formtext {
background-color: blue;
border: 2px solid black;
margin: 10px;
}
SimpleForm.jsx
import styles from "./Formtext.module.css";
...
<FormText cssModule={styles.formtext}>
This is some placeholder help text...
</FormText>
```
However, this doesn't seem to work. Checking my react dev tools the cssModule prop evaluates to undefined.
I'm using Using Reactstrap 5.0 and create-react-app 1.1.5
Is there something I'm unaware of that I need to do?
Do I need to eject to be able to use css-modules?
Can someone point me to an example of how to use the Reactstrap's cssModule prop correctly?
For reference here is the proptypes definition from Reactstrap docs
FormText.propTypes = {
children: PropTypes.node,
inline: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
color: PropTypes.string, // default: 'muted'
className: PropTypes.string,
cssModule: PropTypes.object,
};
On cssModule
It looks like cssModules doesn't behave quite like you would think; the prop doesn't take a single, overriding class - it takes a rejected class and a replacement class.
Reactstrap uses mapToCssModules to get this done. See its documentation here. Take note of the usage example:
<Example tag="div" cssModule={{ 'w-100': 'w-75' }} />
So your case would look something like this:
<FormText cssModule={{ 'form-text' : styles.formtext }} />
This will completely surpress the 'form-text' class though (which in your case, only contributes display: block. If you'd like to override more selectively, see below.
Try this instead
In the FormText source code, it looks like you may be able to do your overrides in a different way:
If you want to omit the form-text class altogether, include inline as a prop,
If you want to omit any color-related bootstrap classes, set 'color' to false (or something falsy),
set the className prop to your CSS Module object (styles.formtext).
<FormText className={styles.formText} color='' inline>
Test formtext
</FormText>
The most important part here is actually the className prop. You can also further override styling by including a tag prop (again, check the FormText docs).
Hope this was helpful! Happy holidays! 🦃🎅
I did not really get the accepted answer, but I had the same problem recently and in my opinion, cssModule behaves exactly as one would expect.
You just pass an imported module object and then specify classes they will be referenced towards the module.
Here is my example (from create-react-app) how I did fix Navbar to get it's bootstrap styles from my bootstrap module (as I don't import bootstrap globally):
import cx from 'classnames';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
import navbar from './navbar.css';
let styles = Object.assign({}, bootstrap, navbar);
public render() {
return (<Navbar cssModule={styles} className={cx(styles.navbarExpandSm, styles.navbarToggleableSm, styles.borderBottom, styles.boxShadow, styles.mb3)} light>[your menu here]</Navbar>);
}
This simply says the control to take the styles module and reference all the class names passed in classNames towards it. If you take a look at the mapToCssModules method, it is exactly what it does.
https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53
In my case, it allows the control to pick up the original bootstrap styles and I can override what I need in my own module.
I am running into an issue where part of my component within the modal generated by lightning:overlayLib requires the user to scroll. I want the div that appears to display over the top of the footer component. Is this possible?
Current issue:
If I disable the two overflow attributes in css on the slds-modal__content (shown below):
I get the desired result:
BUT, I cannot for the life of me, get this to work. When I pass in the modified css class slds-modal__content, it fills the screen with white. (When I set overflow: visible)
I am generating the component using the lightning:overlayLib using this code:
var modalHeader, modalBody, modalFooter;
$A.createComponents([
["c:UWB_modalHeader",{'label':'Approve'}],
["c:UWB_utilityModal",{'modalName':'approve', 'approvalId':data.proccessInstanceToPiwi[data.approvalHistory[0].ProcessInstanceId], 'relatedObject':recordData}],
["c:UWB_modalFooter",{'cancelLabel':'Cancel', 'submitLabel':'Approve'}]
],
function(components, status){
if (status === "SUCCESS") {
modalHeader=components[0];
modalBody = components[1];
modalFooter = components[2];
component.find('overlayLib').showCustomModal({
header: modalHeader,
body: modalBody,
footer: modalFooter,
showCloseButton: false,
cssClass: 'slds-modal__content'
})
}
}
);
Where the css class 'slds-modal__content' is as follows:
.THIS .slds-modal__content{
overflow-y: visible !important;
overflow-x: visible !important;
}
Even after attempting to modify the class, the issue still persists. I have been successful with this method generating a standard modal without using lightning:overlayLib, but I'm not able to generate the modal in this way.
I've just recently started using lightning:overlayLib myself. I didn't have the issue you're having, but I realized that since the body and footer components require application events to communicate, the feature of declaring a footer component that requires communication with the body component at all is too cumbersome to be worth it.
I would recommend not using the footer component feature of lightning:overlayLib at all, and just put the buttons you need in the body component.
I am trying to make an interface with a pair of Select and Input from Material UI components library. I want the current behaviour for my UI/UX in the next order:
1. User chose option from Select element
2. Inputwill be focused when user chose something from Select
You can see how it's works (see the second Select, because the first one is a native Select, and it's not suitable for my purpose):
https://codesandbox.io/s/l4nq3pjjrm
The first one in the example above works great, but I need non-native variant.
How I can do that?
Thanks.
P.S. Also, I found that there are another issues with that wrong Select behaviour, take a look for my github post for mo details. (https://github.com/mui-org/material-ui/issues/11964)
So if your problem is the focus after the value selection, try this:
1) Import MuiThemeProvider and createMuiTheme on your component:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
2) Then Add this lines of code after your imports (override css):
const theme1 = createMuiTheme({
overrides: {
MuiSelect: {
select: {
"&:focus": {
background: "$labelcolor"
}
}
}
}
});
3) And for the final step, wrap your component that you want to edit with this code:
<MuiThemeProvider theme={theme1}>
// Your Component here
</MuiThemeProvider>
I applied it on your code here
For some reason the top answer didn't work for me. For anyone else facing this, you can also do it this way:
className: {
"& .MuiSelect-select:focus": {
backgroundColor: white,
},
},