I am having a weird problem. I have a aws serverless app running react/redux and node. I am also using Ant design with react.

When I deploy to aws, inline css is being injected (I think).

On my local machine the following code:

<Col xs={36} sm={12}>
  <FormItem label={showLabel('Date and Time ', this.props.deviceSize)}>
    {(<DatePicker
      placeholder="Date and Time"
      size="large"
      showTime={{ format: 'HH:mm:ss' }}
      format="YYYY-MM-DD HH:mm:ss"
      onChange={(_, val) => {
        this.setState({ date: val });
      }}
    />)}
  </FormItem>
</Col>

produces:

<div class="ant-form-item-control-wrapper">
  <div class="ant-form-item-control">
    <span class="ant-form-item-children">
      <span class="ant-calendar-picker ant-calendar-picker-large">
        ...
      </span>
    </span>
  </div>
</div>

But once I deploy to aws, it produces the following:

<div class="ant-form-item-control-wrapper">
  <div class="ant-form-item-control">
    <span class="ant-form-item-children">
      <span class="ant-calendar-picker ant-calendar-picker-large" style="width: 195px;">
        <div>
          ...
        </div>
      </span>
    </span>
  </div>
</div>

style="width: 195px;" has been added. This is throwing off my design.

How would I go about solving this issue?

Update 1

I realized if showTime and format attributes are removed the deployed aws rendering behaves as expected without the injected style="width: 195px;"

Update 2

So this style="width: 195px;" injection seemed weird so I searched ant-design/ant-design github for this string. And it came up three places.

1) components/date-picker/tests/snapshots/demo.test.js.snap

2) site/theme/template/Home/BannerImage.jsx

3) components/form/tests/snapshots/demo.test.js.snap

Seems like I will have to figure out what causes that width to be added. Or find some way to remove that style after render (although that feel like that would be the wrong way to go about solving this).