phone input styles not injected. with redux-form HOC.
See original GitHub issueIm using redux-form Field component as parent, i can connect to the redux store and submit the input properly, but the css is not present, i tried importing the css to the component and also import it to the page where i use this component. but no success whereever i import the css. am i missing something? it looks like this : https://imgur.com/a/GtoGD
import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import Phone from 'react-phone-number-input';
import rrui from 'react-phone-number-input/rrui.css';
import rpni from 'react-phone-number-input/style.css';
import { required } from '../../../app/reduxFormFieldValidation';
export class WizardPhoneNumberInput extends React.Component {
constructor(props) {
super(props);
this.state = {
phone: '',
}
this.handleOnChange = ::this.handleOnChange;
}
handleOnChange(phone) {
this.setState({
phone,
})
}
render() {
const { name, isRequired } = this.props;
const validator = isRequired ? [required] : [];
return (
<Field
name={name}
component="text"
validate={validator}
value={this.state.phone}
>
<Phone
country="US"
onChange={this.handleOnChange}
/>
</Field>
);
}
}
WizardPhoneNumberInput.propTypes = {
name: PropTypes.string.isRequired,
isRequired: PropTypes.bool,
}
WizardPhoneNumberInput.defaultProps = {
isRequired: true,
}
and then using it in some page like this
<WizardPhoneNumberInput isRequired={required} name={name} {...rest} />
my webpack css config:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
// sourceMap: true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
options: {
// sourceMap: true, // Disabled, due to https://github.com/webpack-contrib/style-loader#url
},
plugins: () => {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-each'),
require('postcss-cssnext'),
require('autoprefixer'),
];
},
},
},
],
},
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Field must be inside reduxForm() when using symlinked module
I fixed this in the end by just importing the Field component and injecting the Input component inside the project itself. It's not...
Read more >Initial value won't load in redux-form. #162 - GitHub
import Phone from 'react-phone-number-input' import React from 'react'; import { Field } from 'redux-form'; ...
Read more >How to Wire Up Redux-Form Bindings to the Form's Inputs
Redux HOC reduxForm() and the <Field> component to manage inputs. These are the terms which we need to understand so that we can...
Read more >React Redux Forms: 4 steps to Implement and Configure
Redux form works with react and redux to make an HTML form simple by ... React component (HOC reduxForm())) can take configuration options ......
Read more >Getting Started - Redux Form
A React component decorator that wraps your entire form in a Higher Order Component (HOC) and provides functionality via props. A Field component...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The only difference seems to be
Perhaps regular CSS styles don’t work with CSS modules. Yeah, that might be so. I myself am not using CSS modules.
SOLVED i excluded the RPNI from the first test, made a separate one for it, and it worked. probably not connected to redux-form.