Styling the dropzone

The hook doesn't set any styles on either of the prop fns (getRootProps() / getInputProps()) — you're in full control.

Using inline styles

Drag 'n' drop some files here, or click to select files

const baseStyle = {/* ... */};
const focusedStyle = {borderColor: "#2196f3"};
const acceptStyle = {borderColor: "#00e676"};
const rejectStyle = {borderColor: "#ff1744"};
 
function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });
 
  const style = useMemo(
    () => ({
      ...baseStyle,
      ...(isFocused ? focusedStyle : {}),
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {})
    }),
    [isFocused, isDragAccept, isDragReject]
  );
 
  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  );
}

Using styled-components

Drag 'n' drop some files here, or click to select files

import styled from "styled-components";
 
const getColor = props => {
  if (props.isDragAccept) return "#00e676";
  if (props.isDragReject) return "#ff1744";
  if (props.isFocused) return "#2196f3";
  return "#eeeeee";
};
 
const Container = styled.div`
  /* ... */
  border-color: ${props => getColor(props)};
`;
 
function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });
  return (
    <Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </Container>
  );
}